«   Previous tip Next tip   »

Chrome DevTools: Record tests with the puppeteer recorder

Last updated: 25th November 2020
Record tests with the puppeteer recorder


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

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:

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.


«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week