How to Create Your First Test with Chrome DevTools Recorder

Chrome DevTools Recorder lets you record and replay a user flow in DevTools. To make that flow a useful first test, add a check for the result you expect—for example, that a checkout confirmation becomes visible. Recording clicks alone does not create a comprehensive test suite, and running a flow in Recorder is separate from running exported code in an automation environment.

This guide walks through opening Recorder, recording a short flow, adding an outcome check, diagnosing replay failures, and choosing whether to export the flow.

1. Open the Recorder panel

Open Chrome DevTools, then choose either route:

Command menu: Press Command+Shift+P on macOS, or Control+Shift+P on Windows, Linux, and ChromeOS. Type Recorder panel, then choose Show Recorder panel.
DevTools menu: Open More options > More tools > Recorder.

The menu route can be easier to find the first time. Chrome describes Recorder as a panel for recording, measuring, and editing user flows. See the Recorder overview.

2. Record one short user flow

In the Recorder panel, start a new recording.
Give it a name that describes the user outcome, such as Search returns a product or Complete checkout.
Use the page as a user would: perform the actions that lead to the outcome you want to check.
Stop the recording when the relevant flow is complete.

Keep your first flow focused. A short sequence is easier to understand and diagnose when a replay stops. The official tutorial demonstrates recording and replaying a checkout flow; the specific flow you choose depends on your site. See Record, replay, and measure user flows.

3. Replay the recording

Replay the flow from the Recorder panel and watch both the page and the step progress. Recorder runs the recorded actions and waits for an element to become visible or clickable when needed; it may scroll that element into view. A successful replay shows that the recorded interactions can run in this browser session, but by itself it does not prove that the intended business outcome occurred.

4. Add a check for the expected result

Decide what success looks like before editing the flow. For a checkout, it might be a confirmation element becoming visible. In Recorder, add a waitForElement step and configure its selector and condition. The feature reference describes conditions based on visibility, an HTML attribute, or a JavaScript property.

Choose a selector for the result element, such as a stable test attribute provided by your application.
Set the condition to match the result you care about—for example, the element is visible.
Replay the flow and confirm the new step passes only when that expected state is reached.

For example, if your application renders <div data-testid="checkout-confirmation">Order received</div> after a successful checkout, configure the assertion to wait for that element to be visible. Use the selector format accepted by the Recorder step editor. This example is illustrative; choose a selector that exists in your own page.

An assertion can fail after its timeout if the selected element or condition is not reached. That failure is useful: it distinguishes “the interactions ran” from “the expected state appeared.” A selector that works on one page is not guaranteed to be stable on every site.

5. Review and refine the recorded steps

Recordings can include steps you did not intend to test, or omit an action the flow needs. Review the steps and:

Remove accidental interactions and add any missing actions.
Edit selectors that point to unstable or incorrect elements.
Prefer site-provided test attributes where available, as recommended in the Recorder feature reference.
Add an explicit wait or assertion when the next action depends on a page state that may take time to appear.
Add a hover step manually if the flow depends on hover behavior; hover events are not automatically recorded in every situation covered by the reference.

Recorder supports editing and replaying steps in the panel. Its features reference documents the available step configuration and debugging controls.

6. Debug a failed replay

When a replay stops or the assertion fails, isolate the first step that does not behave as expected:

Replay more slowly so you can see which element or state is missing.
Set a breakpoint around the suspicious step and execute the flow one step at a time.
Compare the step with its generated code to understand what Recorder is trying to find or do.
Check whether the selector still matches, the page reached the expected state, and a required action such as hover was recorded.
Adjust the selector, add an explicit wait or missing action, then replay again.

A failure may come from a changed page, an element that is not yet available, a selector that matches the wrong element, or an omitted interaction. Slow replay, breakpoints, and step-by-step execution help narrow down which step needs attention.

7. Decide whether to export the flow

For a first exercise, replaying in Recorder is enough to learn the interaction and validate the expected state. For a wider automation workflow, export the recording and set up that workflow separately.

Format or path	Useful when	Trade-off
Recorder replay	You want to edit, inspect, and debug the flow in DevTools.	The run happens in the Recorder environment; it does not by itself establish CI or cross-browser behavior.
JSON	You want an editable recording that can be imported back into Recorder.	It is a flow representation; downstream execution needs a compatible tool or integration.
`@puppeteer/replay`	You want to use the Puppeteer Replay library with an exported flow.	The library has its own setup and execution behavior.
Puppeteer script exports	You want to customize the generated JavaScript at script level.	Generated scripts cannot be imported back into Recorder, and their runtime needs to be configured separately.

Recorder also lists exports for Puppeteer for Firefox and Puppeteer with Lighthouse analysis. Its documentation mentions third-party conversion or replay options such as Cypress Chrome Recorder, Nightwatch Chrome Recorder, CodeceptJS Chrome Recorder, TestCafe, and Sauce Labs. Treat these as documented integration possibilities, not guarantees of current availability or compatibility. Extensions may add formats. See the export and integration reference.

8. Troubleshooting

Symptom	Likely cause	What to try
A click or typing step cannot find its target	The selector changed, matches the wrong element, or the element is not ready.	Inspect and edit the selector, prefer a site test attribute where available, and add an appropriate wait before the action.
The page looks right, but the test still passes without checking the result	The flow has interactions but no outcome assertion.	Add a `waitForElement` step for the expected state, such as a confirmation element becoming visible.
The assertion times out	The element did not match the selector, or its configured condition was not reached before the timeout.	Check the selector and condition against the actual page state; replay slowly to see whether the action that should produce the result succeeded.
A menu or control that appears on hover is missing	The needed hover behavior may not have been recorded automatically.	Add the hover step manually and replay from that point.
The flow works in Recorder but not after export	The exported code or flow runs in a separate library, script, or framework environment.	Follow that environment’s setup and inspect the generated code; do not assume a Recorder replay guarantees execution elsewhere.
An extension format does not appear or work	The extension may need a new tab, work only on web pages, or be blocked by administrator policy.	Check the extension’s instructions and your browser’s policy. Chrome documents these caveats in its Recorder extension guide.
The menu label differs from a tutorial	Some tutorial material is from preview-era documentation and labels can differ.	Use the current overview and feature reference linked above to locate the panel and controls.

Performance, reliability, and cost

Recorder’s practical speed depends on the flow and page behavior. Long flows take more steps to replay and give more places for a page change to cause a failure, so start with the smallest sequence that proves the outcome you need. Wait for meaningful page states rather than relying on an arbitrary pause when the Recorder configuration allows an element-based condition.

Reliability comes from maintaining the flow as the site changes: use stable selectors where the application provides them, keep an assertion for the expected state, and investigate failures one step at a time. Exporting to a library or framework adds a separate runtime and configuration surface; validate that environment independently before relying on it in a broader automation workflow.

The Chrome documentation cited here describes Recorder as a DevTools feature and does not specify a Recorder usage price or performance benchmark. The required browser software and any downstream tooling have their own terms and setup; check the relevant provider documentation for current details.

Or skip the browser setup

If your task is to capture a website screenshot rather than build a repeatable interaction test, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF. See the ScreenshotNeo API documentation for options and parameters.

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}`);

Cookie banners, popups, and chat widgets are removed before the shot, and each cleanup step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and billing status.
An MCP server lets AI agents, including Claude, Cursor, and other MCP clients, take screenshots, get page information, and capture PDFs.
1,000 screenshots a month are free with no card. Paid plans start at $5 for 3,000 screenshots.

FAQ

Does Recorder create a complete automated test suite?

No. It records and replays user flows. A useful test also checks an expected result, and a broader suite requires additional test design and execution.

Can I edit a recording?

Yes. Recorder lets you edit steps and selectors, and its JSON export can be edited and imported back into Recorder.

Does exporting a flow make it run in CI?

Export gives you a format or script to use with another tool. That tool’s runtime, dependencies, and automation setup are separate.