Chrome DevTools Recorder: First Test Guide

This guide walks you through creating your first automated browser test using the Chrome DevTools Recorder. You’ll record a series of actions in your browser, turn them into a reusable test script, and run it to verify your web app works as expected. No prior testing experience is needed—just Chrome and a basic understanding of web pages.

What You’ll Need

• Google Chrome (recent version, updated within the last year or so)
• A web page or app you want to test (can be local or on the internet)
• Basic familiarity with Chrome DevTools (opening it and navigating tabs is enough)

Step-by-Step

1. Open the Recorder panel. In Chrome, press F12 or right-click and select “Inspect” to open DevTools. Click the “Recorder” tab in the top menu bar. If you don’t see it, click the ›› (more tabs) icon and select “Recorder” from the dropdown.
2. Start a new recording. In the Recorder panel, click “Start new recording.” Name your recording something descriptive, like “Login Flow Test” or “Add to Cart Test.” Click “Start recording.” The button will turn red, indicating that recording is active.
3. Perform the actions you want to test. Use the browser normally to complete the sequence you want to automate. For example, navigate to your site, click a button, fill in a form, or go through a checkout. Every click, input, and navigation will be captured. Take your time—the recorder captures the steps as you do them.
4. Stop the recording. Once you’ve completed the actions, go back to the Recorder panel and click the red “Stop recording” button. Your steps will appear as a list in the panel, each with a description (like “click” or “change”).
5. Review and edit the steps. Click on any step to see its details, including the selector and the action type. You can remove a step by hovering over it and clicking the trash icon. To add a step manually, click the “+” button and choose from options like “Click” or “Assert.” For now, keep it simple and leave the recorded steps as they are.
6. Add an assertion (optional but recommended). To verify that something appears after your actions, click the “+” button and select “Assert” → “Element visible.” Then click on the element you expect to be visible (e.g., a success message). This makes your test more meaningful.
7. Replay the test. Click the “Replay” button at the top of the Recorder panel. Chrome will open a new tab and automatically execute your recorded steps. Watch the playback to see if everything runs smoothly. If any step fails, the replay will stop and highlight the problem.
8. Export the test as code. Once the replay succeeds, click the “Export” button (the download icon). Choose a format: “Puppeteer” or “Playwright”. Copy the generated code or save it as a .js file. This code can be used in a CI/CD pipeline or run locally with Node.js.
9. Run the exported code (optional). If you have Node.js installed, you can run the exported Puppeteer or Playwright script. Install the required library (e.g., npm install puppeteer) and then run node your-test.js. This runs the test outside of DevTools, which is useful for automation.

Common Mistakes

• Recording too many steps. Keep the test focused on one specific flow. Recording a long session with unrelated actions makes the test fragile and hard to debug.
• Ignoring selectors. The recorder picks CSS selectors automatically, but they can be brittle if the page structure changes. After recording, check that the selectors are specific enough (e.g., use IDs or data attributes instead of generic classes).
• Not adding assertions. A test that just clicks through without checking anything isn’t very useful. Always verify that the expected outcome appears.
• Forgetting to stop the recording. If you leave the recording on, it will capture every action you do in the browser, even unrelated ones. Always stop when you’re done.

Tips

• Use a clean browser profile. For consistent results, record and replay in a fresh incognito window or a dedicated testing profile. This avoids interference from extensions or existing cookies.
• Name your steps. After recording, click on a step and rename it (e.g., “Enter email”) to make the test readable and easier to maintain.
• Test on different viewports. Use the device toolbar in DevTools to record a test at mobile dimensions, then replay it to check responsiveness.
• Use the “Step” feature. During replay, you can click “Step” to run the test one action at a time, which helps you see exactly where it fails.

Troubleshooting

Replay fails on a step. The most common cause is a selector that doesn’t match the element anymore. Open the step details, click “Edit”, and try a different selector (e.g., use aria-label or a more stable class). You can also use the “Pick” button to re-select the element manually.

The Recorder tab is missing. Make sure you’re using a recent version of Chrome. If it’s still not there, go to chrome://flags, search for “DevTools Recorder” and enable it, then restart Chrome.

Recorded actions don’t replay correctly. This often happens with dynamic content, like dropdowns or autocomplete. Try adding a small delay between steps (in the exported code) or use a more robust selector. In the recorder, you can also manually add a “Wait” step.

Export doesn’t work. If the export button is greyed out, make sure you’ve stopped the recording and have at least one step. If it still fails, copy the steps as JSON (using the “Copy as JSON” option) and convert them manually using the Puppeteer or Playwright documentation.

Frequently Asked Questions

Can I record tests on any website? Yes, as long as you can open it in Chrome. However, some sites may block automation or have dynamic elements that make testing tricky.

Is the Recorder free? Yes, it’s a built-in feature of Chrome DevTools, completely free to use.

Do I need to know JavaScript to use the Recorder? No, the Recorder lets you create tests without writing code. But knowing JavaScript helps if you want to customize the exported scripts.

Can I run recorded tests in CI/CD? Yes, you can export the test as Puppeteer or Playwright code and integrate it into your pipeline. You’ll need to install the respective library and a browser runner.

What’s the difference between Puppeteer and Playwright exports? Both are popular browser automation libraries. Puppeteer is Chrome-focused, while Playwright supports multiple browsers. Choose based on your project’s needs.

Does the Recorder support multiple tabs or pop-ups? The Recorder can capture actions in multiple tabs, but it’s best to keep tests to a single tab to avoid complexity. Pop-ups are generally not supported.

Related

• How to Deactivate or Delete Snapchat: Full Guide
• How to Add Shapes in Google Docs
• Stop Android Background Data Use: Settings Guide