How to Export Cypress Tests from Google Chrome

To export a Cypress test from Google Chrome, record a user flow in Chrome DevTools Recorder, install the Cypress Chrome Recorder extension, then use Recorder’s export menu to save the flow as a Cypress test script. Put the generated file in your Cypress project, review its selectors and commands, and add assertions for the outcomes you expect. For multiple recordings or automated conversion, use the @cypress/chrome-recorder CLI.

Export one flow from Chrome DevTools

1. Open the website you want to test in a regular Chrome tab. Open DevTools using Chrome’s menu or your keyboard shortcut.
2. Open the Recorder panel. If it is not visible, open the DevTools panel menu and select Recorder.
3. Start a recording, perform the user flow, and stop the recording. Give the recording a descriptive name so you can identify it later.
4. Install the Cypress-maintained Cypress Chrome Recorder extension. Chrome’s instructions are to choose the extension from the collection and click Add to Chrome in the Chrome Web Store.
5. Open a new browser tab after installing the extension, then open DevTools and the recording. In Recorder’s export menu, choose Export as a Cypress Test script (the extension usage section calls the action Export as a Cypress Test).
6. Save the generated source in your Cypress project. For Cypress 10 or newer, use a .cy.js or .cy.ts filename as the extension documents. Confirm the file is under the spec directory configured by your project.
7. Read through the generated code, run it in your project, and add assertions that check the expected result of the flow.

Chrome DevTools Recorder is designed to record, replay, debug, and measure user flows. The Cypress extension adds the Cypress export action; it converts recorded actions into code, so treat the output as a starting point that needs review.

What the generated test contains—and what it may not

The exporter maps supported Recorder steps to Cypress commands. The documented mappings include:

Recorder step	Generated Cypress command
change	cy.get("element").type("text")
click	.click()
Right click	.rightclick()
doubleClick	.dblclick()
hover	.trigger()
keyDown	cy.type("{key}")
navigate	cy.visit("url")
setViewport	cy.viewport(width, height)
scroll	cy.scrollTo(x, y)

The package documentation says keyUp is not exported. If a recording includes an unsupported step, the CLI should issue a warning. Check the resulting source instead of assuming every recorded action was converted.

A sequence of clicks and typing does not, by itself, express whether the application behaved correctly. Add Cypress assertions for meaningful outcomes, such as a confirmation heading, a changed status, or the expected URL. Prefer selectors that are stable in your application and revise generated selectors that depend on fragile page structure.

Convert Recorder JSON with the CLI

Use the CLI when you already have Recorder JSON files, want to convert a folder of recordings, or need options such as a dry run, printed output, or a custom destination. The package documents Chrome 101 or newer as the minimum for exporting Recorder JSON; double-click and right-click support require Chrome 103 or newer.

Install and choose a conversion mode

# Install globally
npm install -g @cypress/chrome-recorder

# Or run the interactive converter without a global install
npx @cypress/chrome-recorder

To export a recording, first save or export it as a Chrome DevTools Recorder JSON file. Then pass its path to the converter:

# Convert one recording
npx @cypress/chrome-recorder recordings/login-flow.json

# Convert multiple JSON recordings
npx @cypress/chrome-recorder recordings/*.json

# Write converted files to a custom folder
npx @cypress/chrome-recorder recordings/login-flow.json --output=generated-tests

The documented default output is cypress/integration, with cypress/e2e as a fallback. If neither directory exists, the package README says to create a folder manually or install Cypress in the project. Check the resulting location and make sure it matches the spec pattern configured in your Cypress project.

Preview or control conversion

# Show the transformed output without writing files
npx @cypress/chrome-recorder recordings/login-flow.json --dry --print

# Print transformed files
npx @cypress/chrome-recorder recordings/login-flow.json --print

# Force conversion past Git safety checks
npx @cypress/chrome-recorder recordings/login-flow.json --force

Use --dry to preview a conversion without writing it, and --print to print transformed files. The package provides --force to bypass Git safety checks; use it only when you understand which files may be affected. For scripted integrations, the package also exposes cypressStringifyChromeRecording for programmatic conversion.

Choose the extension or CLI

Need	Best fit	Why
Export one flow directly in Chrome	Recorder extension	Records and exports from the DevTools interface, producing a downloadable test script.
Convert JSON recordings in batches	CLI	Accepts file or folder globs and supports a custom output directory.
Preview or automate conversion	CLI	Provides dry-run and print options, plus a programmatic conversion function.

Both routes convert supported recorded actions; neither guarantees that the result is a complete, maintainable test for your application. Review the output, check unsupported steps, and add assertions before relying on the spec.

Troubleshooting

Symptom	Likely cause	What to do
The Cypress export option is missing	The extension is not installed or DevTools has not loaded its Recorder integration.	Confirm the Cypress extension is installed, open a new browser tab after installation, then reopen DevTools and Recorder.
Export is unavailable on the current page	Chrome does not offer the extension action on chrome:// pages.	Open the site under test in a normal web page and use Recorder there.
The extension is installed but the option remains absent	Browser administrator policy may restrict extensions or custom Recorder options.	Check Chrome’s extension policy or ask the browser administrator whether the extension is allowed.
Recorder was the first DevTools panel and export is missing	A known issue affected Chrome 104 and 105.	Open another DevTools panel, then Recorder, or update Chrome; Chrome fixed this issue in version 106.
The CLI cannot export a recording	The recording may not be in Recorder JSON format, or Chrome may be below the documented minimum.	Export the flow as Recorder JSON and use Chrome 101 or newer. Chrome 103 or newer is required for double-click and right-click support.
A generated action is missing or a warning appears	The step type may not be supported; keyUp is specifically listed as not exported.	Inspect the source recording and generated test, then add the missing Cypress action or adjust the flow manually.
The CLI writes to an unexpected place or cannot find its output directory	The default location depends on whether cypress/integration or cypress/e2e exists.	Pass --output=your-folder, create the desired directory, and verify the Cypress spec pattern includes it.
The generated test runs but does not prove the flow succeeded	Recorded interactions do not necessarily include assertions for the intended result.	Add assertions for the visible state, URL, or other application outcome that defines success.

Reliability and maintenance

• Keep the generated spec in version control. Use a filename and directory Cypress recognizes, and review the diff after conversion.
• Make selectors durable. Replace selectors tied to incidental layout or generated markup with selectors maintained for testing where possible.
• Assert outcomes. Add checks for the result users care about, not only the actions they performed.
• Re-run after application changes. A recording captures a particular flow and page state; changes to navigation, forms, or selectors can make the generated test stale.
• Handle conversion gaps deliberately. Read warnings and account for unsupported actions such as keyUp rather than silently assuming parity.

The extension and CLI have no usage charge stated in the cited package documentation. The main cost is review and maintenance time: exported actions may need selector cleanup, unsupported steps may need manual code, and assertions must match the test’s purpose.

Or skip the browser setup

If your task is to capture a website screenshot rather than turn a browser flow into a Cypress test, ScreenshotNeo provides a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP, or PDF. See the API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

• Cookie and consent banners, newsletter popups, and chat widgets from supported platforms are removed before capture; each step can be turned off.
• Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses include X-Page-Verdict and X-Billed headers.
• An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
• The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan.

Sign up for ScreenshotNeo free: 1,000 screenshots a month, no card required.

FAQ

Does Chrome export a Cypress test without an extension?

The described Recorder-to-Cypress export action comes from the Cypress Chrome Recorder extension. Chrome Recorder can record the flow; the extension adds the Cypress export choice.

Can I export a TypeScript spec?

The extension documentation lists .cy.ts as an option for Cypress 10 or newer. Check and adjust the generated code to fit your project’s TypeScript setup.

Does the export add assertions automatically?

The documented conversion maps recorded actions. Review the generated file and add assertions that express what the test should verify.

Can I convert recordings in a build script?

The CLI accepts recording paths and globs, and the package exposes a conversion function for programmatic use. Pin and review the package version according to your project’s dependency practices.