# @cypress/chrome-recorder > Generate Cypress Tests from Chrome DevTools Recordings Latest version **2.3.1** (published 2023-04-19) · MIT license · 0 weekly downloads ## Install ```sh npm install @cypress/chrome-recorder pnpm add @cypress/chrome-recorder yarn add @cypress/chrome-recorder bun add @cypress/chrome-recorder ``` Provides the command `chrome-recorder`. ## Health **Score 40/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.3.1 | | Published | 2023-04-19 | | First published | 2022-04-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 22.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 250 | | Author | Cypress DX | | Maintainers | cypress-npm-publisher | | Keywords | cypress, testing, automation, devtools | ## Links - npm: https://www.npmjs.com/package/@cypress/chrome-recorder - Repository: https://github.com/cypress-io/cypress-chrome-recorder - Homepage: https://github.com/cypress-io/cypress-chrome-recorder#readme - Issues: https://github.com/cypress-io/cypress-chrome-recorder/issues - npm.io page: https://npm.io/package/@cypress/chrome-recorder ## Dependencies (7) - [meow](https://npm.io/package/meow.md) ^10.1.2 - [chalk](https://npm.io/package/chalk.md) ^5.0.1 - [execa](https://npm.io/package/execa.md) ^6.1.0 - [globby](https://npm.io/package/globby.md) ^13.1.1 - [inquirer](https://npm.io/package/inquirer.md) ^8.2.1 - [is-git-clean](https://npm.io/package/is-git-clean.md) ^1.1.0 - [@puppeteer/replay](https://npm.io/package/@puppeteer/replay.md) ^2.10.2 ## Alternatives - [@snazzah/davey](https://npm.io/package/@snazzah/davey.md) — 1.5M weekly downloads - [@vendure/testing](https://npm.io/package/@vendure/testing.md) — 8.3K weekly downloads - [vue-simple-context-menu](https://npm.io/package/vue-simple-context-menu.md) — 6.6K weekly downloads - [cypress-webpack-preprocessor-v5](https://npm.io/package/cypress-webpack-preprocessor-v5.md) — 2.1K weekly downloads - [@backstage/plugin-catalog-backend-module-puppetdb](https://npm.io/package/@backstage/plugin-catalog-backend-module-puppetdb.md) — 1.3K weekly downloads ## Recent versions - 2.3.1 (latest) — 2023-04-19 - 2.3.0 — 2022-11-16 - 2.2.0 — 2022-08-22 - 2.1.0 — 2022-08-17 - 2.0.0 — 2022-07-18 - 1.4.0 — 2022-05-13 - 1.3.0 — 2022-05-03 - 1.2.0 — 2022-04-29 - 1.1.1 — 2022-04-25 - 1.1.0 — 2022-04-12 ## 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). --- _Source: https://npm.io/package/@cypress/chrome-recorder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._