Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 days 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 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-30T23:36:12.000Z (2 months ago)
- Last Synced: 2024-10-03T09:47:10.959Z (about 1 month ago)
- Language: TypeScript
- Size: 278 KB
- Stars: 232
- Watchers: 14
- Forks: 20
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @cypress/chrome-recorder
[![npm version](https://img.shields.io/npm/v/@cypress/chrome-recorder)](https://www.npmjs.com/package/@cypress/chrome-recorder) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](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.
[![Cypress Chrome Recorder Demo](https://img.youtube.com/vi/-RJuZrq-wOk/0.jpg)](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
[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress-chrome-recorder/blob/master/LICENSE)
This project is licensed under the terms of the [MIT license](/LICENSE).