Introduction

ThePuppeteer 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 theRecorder experiment from theExperiments Panel (SelectShow Experiments from the Command Menu withCmd + Shift + P).
2. Reload DevTools withAlt + R.
3. SelectAdd Recording from theSources Panel > Recordings Pane.
4. Select theRecord button and click on the webpage.
5. Select theRecord 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 needsupervision - 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 producingscaffolding-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 aGitHub 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, thePlaywright CLI.
• Here's the work-in-progressPuppeteer Recorder.