Free tools Windows power users keep installed
One-click scans. No signup required.
Chrome DevTools Recorder lets you record a browser flow, replay it, and add a check that confirms the result you expect. A recording by itself is only a repeatable sequence of actions—not a complete test suite. The key step is adding an assertion, such as checking that a confirmation message becomes visible.
What Recorder does—and what makes a flow a test
Recorder works inside Chrome DevTools to record, replay, and edit user flows. It can help you reproduce actions such as searching a site or completing a checkout, then check whether the page reached an expected state. The Chrome DevTools overview describes it as a way to “record, measure, and edit user flows.”
For a useful first test, keep these parts distinct:
- Actions: what a person does, such as entering a search term and clicking Search.
- Expected result: what should be true afterward, such as a product result or confirmation becoming visible.
- Assertion: the Recorder step that checks that expected result. Without one, a replay can complete its actions without proving that the page behaved correctly.
This walkthrough keeps the flow inside Recorder. Exporting the flow is a separate step toward using it in a broader automation workflow.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Open Recorder and make a focused recording
- Open Chrome DevTools. Open the Command menu with Command+Shift+P on macOS, or Control+Shift+P on Windows, Linux, or ChromeOS.
- Show the Recorder panel. Type
Recorder paneland choose Show Recorder panel. Alternatively, use More options > More tools > Recorder. Menu wording may vary from the preview-era tutorial; see the current overview for the panel route. - Start a new recording. Give it a name that describes the outcome, such as
search returns a productorcomplete checkout. - Perform the flow in the page. Use the site as a person would, then end the recording. Keep the first flow short and focused: a small flow is easier to inspect when a step fails.
The official record-and-replay tutorial demonstrates a checkout flow. Your own first recording can be any short interaction with a clear result.
Replay the flow and add an assertion
- Replay the recording from Recorder and watch both the page and the step progress. Recorder waits for an element to become visible or clickable for the corresponding step and may scroll it into view.
- Decide what success means. For a search flow, that might be a results element appearing; for a checkout flow, it might be a confirmation element becoming visible. Choose a result that demonstrates the behavior you actually care about.
- Add a wait-for-element check. Create a configurable
waitForElementstep, provide a selector for the expected element, and choose the condition to verify. Available condition types include visibility, an HTML attribute, or a JavaScript property. - Replay again. Confirm that the assertion passes when the expected state appears. Recorder reports an assertion failure after a timeout if the configured condition is not met.
For example, if the page should show a checkout confirmation, use the selector for that confirmation element and set the condition to visibility. The correct selector depends on the page; Chrome’s Recorder feature reference documents assertion configuration, but does not guarantee that any selector strategy will remain robust on every site.
Review and refine the recorded steps
A recording is a draft. Inspect its steps and adjust them to reflect the intended flow rather than every incidental action made during recording.
- Remove accidental steps and add any missing interaction.
- Edit a selector if it points to the wrong element or is too fragile. Where available, site-provided test attributes can make selectors more resilient.
- If the flow depends on a hover interaction, check whether that action was recorded. Hover events are not automatically captured in every situation described in the feature reference, so you may need to add a hover step manually.
- Keep the assertion tied to the outcome, not merely to an intermediate action. A click succeeding does not by itself prove that the expected page state appeared.
Debug a failed replay
Use the Recorder controls to isolate the failure instead of immediately recording the whole flow again:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems- A step cannot find or interact with an element: inspect its selector, then edit it if it no longer identifies the intended element. Check whether the element needs time to appear or become clickable.
- The assertion times out: verify the selector and condition, and confirm the expected state actually occurs in the page. If the page loads that state later, adjust the flow or wait behavior rather than treating a click as proof of success.
- A hover-dependent action fails: add the needed hover step manually and replay the flow.
- The failing point is unclear: slow down replay, add a breakpoint, or execute one step at a time. Compare the individual steps with their generated code to see where actual behavior diverges from the recording.
These debugging controls and selector guidance are covered in the features reference. Extensions can add Recorder options, but availability may depend on the page, installation state, or administrator policy; see Chrome’s extension guide.
Stay in Recorder or export the flow?
Use Recorder for an easy-to-inspect flow and panel-based debugging. Export when you need to edit or run the flow in another environment. Export availability and the setup required by downstream tools are separate from replaying a flow inside Recorder.
| Choice | Useful when | Important distinction |
|---|---|---|
| Replay in Recorder | You are building or debugging the flow in DevTools. | Replay and step inspection happen in the Recorder panel. |
| Export JSON | You want an editable representation you can import back into Recorder. | JSON is not, by itself, proof of execution in another test environment. |
Export @puppeteer/replay |
You want to use the Puppeteer Replay library. | The exported flow moves into a separate library and execution setup. |
| Export a Puppeteer script | You want to customize the flow at script level. | Script exports cannot be imported back into Recorder. |
| Use another listed integration or extension | Your workflow already uses a compatible tool and its setup is available to you. | The reference lists options including Cypress Chrome Recorder, Nightwatch Chrome Recorder, CodeceptJS Chrome Recorder, TestCafe, and Sauce Labs; listing them is not a guarantee of current availability or behavior. |
The export and integration reference also lists Puppeteer for Firefox and Puppeteer with Lighthouse analysis. Extensions may add other export formats. An export format does not, on its own, establish cross-browser or continuous-integration reliability: the chosen tool has its own environment, configuration, and execution behavior.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to capture a page image rather than create and replay a Recorder test, ScreenshotNeo is a website screenshot API and MCP server. Its one-request API can return a PNG, JPEG, WebP, or PDF. For example, this cURL request saves a WebP screenshot:
ScreenshotNeo API documentation
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with page-verdict and billing headers in the response. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I import an exported Puppeteer script back into Recorder?
No. JSON can be edited and imported back into Recorder; Puppeteer script exports cannot.
Does Recorder automatically record every hover?
No. A hover-dependent flow may need a hover step added manually.
Does recording a flow mean it will run reliably in CI or another browser?
No. Exporting makes downstream use possible, but the chosen tool and execution environment need their own setup and validation.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
