---
Add [this Chrome Extension](https://chrome.google.com/webstore/detail/cypress-chrome-recorder/fellcphjglholofndfmmjmheedhomgin) to export DevTools Recordings as Cypress Tests directly from the [DevTools Recorder Panel](https://goo.gle/devtools-recorder).
## Usage
1. [Create a new recording](https://goo.gle/devtools-recorder#record) via the Recorder panel
2. Hover over the [export](https://developer.chrome.com/docs/devtools/recorder/reference/#export-flows) icon
3. Click "Export as a Cypress Test"
4. Save file as {testName}.cy.{ts.js}
## Testing
1. Clone the repo, run `yarn` and run `yarn build`
2. Visit chrome://extensions
3. Enable "Developer mode" via toggle switch in upper right corner
4. Click "Load unpacked" button in upper left corner
5. Select the `build` directory produced by `yarn build`
## Publishing
After building and testing the extension locally, upload the build folder to Web Store.
# Export in bulk programmatically
Alternatively, use the [@cypress/chrome-recorder](https://github.com/cypress-io/cypress-chrome-recorder) CLI to export DevTools Recordings as Cypress Tests in bulk programmatically.
================================================
FILE: build/.keep
================================================
================================================
FILE: package.json
================================================
{
"name": "cypress-recorder-extension",
"version": "1.1.2",
"description": "",
"main": "dist/index.js",
"scripts": {
"test": "yarn test",
"build": "rsync -a src/*.json build/ && rsync -a src/*.html build/ && rsync -a src/img/*.png build/img/ && rollup --config rollup.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/admah/cypress-recorder-extension.git"
},
"keywords": [
"chrome",
"extension",
"cypress",
"automation"
],
"author": "Cypress-io",
"license": "MIT",
"bugs": {
"url": "https://github.com/admah/cypress-recorder-extension/issues"
},
"homepage": "https://github.com/admah/cypress-recorder-extension#readme",
"dependencies": {
"@cypress/chrome-recorder": "^2.3.1"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^13.3.0",
"rollup": "^2.77.2"
}
}
================================================
FILE: rollup.config.js
================================================
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: 'src/DevToolsPlugin.js',
output: {
file: 'build/DevToolsPlugin.js',
format: 'iife'
},
plugins: [nodeResolve({
resolveOnly: ['@cypress/chrome-recorder', '@puppeteer/replay']
})]
};
================================================
FILE: src/DevToolsPlugin.html
================================================
================================================
FILE: src/DevToolsPlugin.js
================================================
import { cypressStringifyChromeRecording, stringifyParsedStep } from '@cypress/chrome-recorder';
export class RecorderPlugin {
async stringify(recording) {
return await cypressStringifyChromeRecording(JSON.stringify(recording));
}
async stringifyStep(step) {
return await stringifyParsedStep(step);
}
}
/* eslint-disable no-undef */
chrome.devtools.recorder.registerRecorderExtensionPlugin(
new RecorderPlugin(),
/* name=*/ 'Cypress Test',
/* mediaType=*/ 'application/javascript'
);
================================================
FILE: src/manifest.json
================================================
{
"manifest_version": 3,
"version": "1.1.1",
"name": "Cypress Chrome Recorder",
"description": "Cypress extension for DevTools that allows you to export tests directly from the Recorder panel.",
"permissions": [],
"icons": {
"16": "img/icon_16x16.png",
"32": "img/icon_32x32.png",
"48": "img/icon_48x48.png",
"128": "img/icon_128x128.png"
},
"devtools_page": "DevToolsPlugin.html",
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
},
"minimum_chrome_version": "104.0.0.0"
}