Let's be honest. Tests are super important but also can be quite annoying thing to do. Especially, when we want to recreate user flows and have to looking for all ids, add sleep or waitTo, etc. But what if there is a much easier way? Chrome DevTools recently added the Recorder tab and I have to say it's one of my favourite features recently.
The recorder tab is the next feature in the Preview mode. Thanks to that you can easily record and replay user flow on the webpage and avoid arduous manual work. You can also add/edit/remove steps and measure the performance of a given user flow (an extremely important factor if you want to keep users on your page). What’s more — created flow can be exported as Puppeteer script and used in your CI/CD. Extremely nice! How to generate this script?
- Open the Chrome browser
- Go to the page you want to test
- Open Chrome DevTools
- Click 3 dots to open the menu
- Click More tools > Recorder
- Click the Start new recording button
- Add recording name and optionally selector attribute (e.g. data-testid, data-cy, etc)
- Click Start a new recording button
- Perform actions you want to record
- Click End recording when you ready
- After a while, you’ll receive a timeline similar to this visible on the screenshot below.
Timeline of events in recorded user flow. Each step has 3 dots menu and can be extended to see all details. On the top there are option to edit name or export the script and 2 buttons to replay and measure performance.
You can replay it, edit, add or remove steps, etc. UI is intuitive and I’m sure you’ll know what to do so I’ll skip detailed descriptions. As I said previously you can also export it to use outside of DevTools or share it with others. What I like is the Measure performance option. To run it just click the blue button in the top right corner. Thanks to that you’ll receive a full performance report on a given flow — with screenshots, stats, event stacks, etc — everything you need to make your webpage faster and easier to use. Don’t take my word for it — just check it out! It takes just a few minutes.
PS. If you found this article interesting please leave a comment, or share it with your friends. Thanks in advance!
Top comments (0)