Chrome DevTools: Record tests with the puppeteer recorder

Introduction

The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser.

For example, if you click on an element and type an email address into an email field, the recorder can generate the following code:

await page.click("aria/Login");
await page.type("aria/Email", "umar.hansa@gmail.com");

How to use this feature

Please note: Upon testing, there are a number of bugs with this feature, hence why it's experimental in Chrome Canary!

To get started, follow these instructions:

1. Enable the Recorder experiment from the Experiments Panel (Select Show Experiments from the Command Menu with Cmd + Shift + P).
2. Reload DevTools with Alt + R.
3. Select Add Recording from the Sources Panel > Recordings Pane.
4. Select the Record button and click on the webpage.
5. Select the Record button to stop recording.
6. Observe DevTools generates Node.js code which controls puppeteer.

At this point, you can

• Save the generated test code onto your filesystem.
• Copy and paste it into your code editor.
• Edit the generated code in place (e.g. to add an assertion).
• Append to the current code by selecting the Record button again.

When to use this feature

Test generators can automatically write automation code based on your actions in a webpage. They're great, but just like with testing frameworks, they can have their own limitations. For example, they need supervision - the code it generates is not your final test file, you'll still need to ensure:

• Selectors are appropriate and maintainable.
• waits/pauses are added if needed.
• Assertions are added in (assuming you're writing a test)
• Best practices are still being used.

That being said, the DevTools Recorder, and the recorders listed below in the "Extra" section, are extremely helpful for producing scaffolding-style code which would otherwise be tedious to write. Using it as a boilerplate for a new test file is worth doing.

Extra

• If you're interested in browser automation, I've got a GitHub repo which is full of lots of examples, including test generators - it's for an upcoming course, so stay tuned!
• Playwright (a puppeteer alternative) has it's own recorder, the Playwright CLI.
• Here's the work-in-progress Puppeteer Recorder.