Chrome DevTools: Record tests with the puppeteer recorderLast updated: 25th November 2020
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", "firstname.lastname@example.org");
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:
- Enable the Recorder experiment from the Experiments Panel (Select Show Experiments from the Command Menu with
Cmd + Shift + P).
- Reload DevTools with Alt + R.
- Select Add Recording from the Sources Panel > Recordings Pane.
- Select the Record button and click on the webpage.
- Select the Record button to stop recording.
- 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.
pausesare 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.
- 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.