https://github.com/cypress-io/cypress-chrome-recorder
Export Cypress Tests from Google Chrome DevTools' Recorder
https://github.com/cypress-io/cypress-chrome-recorder
Last synced: about 2 months ago
JSON representation
Export Cypress Tests from Google Chrome DevTools' Recorder
- Host: GitHub
- URL: https://github.com/cypress-io/cypress-chrome-recorder
- Owner: cypress-io
- License: mit
- Created: 2022-03-08T16:35:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-19T14:36:07.000Z (8 months ago)
- Last Synced: 2025-04-14T20:58:33.633Z (3 months ago)
- Language: TypeScript
- Size: 317 KB
- Stars: 241
- Watchers: 14
- Forks: 23
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @cypress/chrome-recorder
[](https://www.npmjs.com/package/@cypress/chrome-recorder) [](http://commitizen.github.io/cz-cli/)
This repo provides tools to export Cypress Tests from [Google Chrome DevTools' Recordings](https://goo.gle/devtools-recorder) programmatically.
Install [Cypress Chrome Recorder extension](https://github.com/cypress-io/cypress-recorder-extension) if you want to export the recordings directly from the Chrome DevTools' Recorder UI.
[](https://youtu.be/-RJuZrq-wOk)
## Prerequisites
In order to export JSON files from Chrome DevTools Recorder you will need to be on Chrome 101 or newer.
`dblClick` and `rightclick` require Chrome 103 or newer.
## Installation
```sh
$ npm install -g @cypress/chrome-recorder
```
## Usage
### Via CLI
To use the interactive CLI, run:
```sh
$ npx @cypress/chrome-recorder
```
The CLI will prompt you to enter the path of the directory or file that you would like to modify as well as a path to write the generated Cypress test to.
If you prefer to enter paths via the CLI, you can run the following command to export individual recordings:
```sh
$ npx @cypress/chrome-recorder
```
or for folders containing multiple recordings:
```sh
$ npx @cypress/chrome-recorder /*.json
```
By default the output will be written to `cypress/integration` with a fallback to `cypress/e2e`. If you do not have those folders, create them manually or install Cypress by running `yarn add -D cypress` or `npm install --save-dev cypress` in your project.
If you prefer a different output directory, specify that via CLI:
```sh
$ npx @cypress/chrome-recorder /*.json --output=folder-name
```
or via the interactive CLI prompts.
### CLI Options
| Option | Description |
| ------------ | --------------------------------------------------------- |
| -f, --force | Bypass Git safety checks and force exporter to run |
| -d, --dry | Dry run (no changes are made to files) |
| -o, --output | Output location of the files generated by the exporter |
| -p, --print | Print transformed files to stdout, useful for development |
### Via Import
```js
import { cypressStringifyChromeRecording } from '@cypress/chrome-recorder';
const stringifiedContent = await cypressStringifyChromeRecording(
recordingContent
);
return stringifiedContent;
```
## Supported Chrome Recorder Step Types
Below are the step types that are currently supported:
| Type | Description |
| ------------------- | --------------------------------------------- |
| change | becomes **cy.get("_element_").type("text")** |
| click | becomes **cy.get("_element_").click();** |
| click (right click) | becomes **cy.get("_element_").rightclick();** |
| doubleClick | becomes **cy.get("_element_").dblclick();** |
| hover | becomes **cy.get("_element_").trigger();** |
| keyDown | becomes **cy.type("{key}")** |
| keyUp | _not exported at this time_ |
| navigate | becomes **cy.visit("url")** |
| setViewport | becomes **cy.viewport(width, height)** |
| scroll | becomes **cy.scrollTo(${step.x}, ${step.y})** |
If a step type is not listed above, then a warning message should be displayed in the CLI.
## License
[](https://github.com/cypress-io/cypress-chrome-recorder/blob/master/LICENSE)
This project is licensed under the terms of the [MIT license](/LICENSE).