Chrome DevTools: Recorder

Every new major release of Chrome, I check the release notes, and this time I got super excited to see "Recorder" being added.

This feature can be used to record, replay and measure user flows! End-to-end testing in the browser.

Doesn't that sound amazing? 👏

Finding the Chrome DevTools Recorder

To find the recorder, you first open up the Chrome DevTools.

Mac Cmd + Shift + C or Windows: Ctrl + Shift + C.

Then you can click on the "More options" button, find the "Mote tools" dropdown, and search for "Recorder".

Find Recorder in Chrome DevTools

Once you open the recorder, it will have some details on how it works.

Chrome DevTools Recorder overview

So basically, we can define user flows that we can re-test over time. This is great for testing essential flows in the application. And more importantly, measure if they did not deprecate performance in new versions.

I'll be using daily.dev as my guinea pig for testing user flows.

I will be testing the flow of switching between feeds, adjusting the feed settings, and clicking an article, after which we can upvote it.

In the recorder panel, click the "Start new recording" button.

It will ask you to give the recording a new name, and at the bottom, there is a big red button to start recording.

Start new recording

Once you hit the record button, you can click the elements you want.

And once you are done, hit the "End recording" button at the bottom of the recorder panel.

End recording

Once you are done, you should see your actions in a neat overview.

Recording done

From here, you will be able to "Replay" the recording.

This will look through each step to see if the flow still works. Remember, this recording will stay here so you can test it over time.

Another thing we can do here is to click the "Measure performance" button. This will loop through the flow you defined and measure that specific recording as you might have seen before in the "Performance" tab.

I find it amazing that we now have a browser way of testing user flows and even measuring those specific flows over time.

Bonus things

We can now do some cool bonus things with this recorder panel.

First, we can manually change selectors by using the little select icon for each event.

Recorder selector change

The next thing we can manually add specific events to our workflow.

Manually change events

Another thing we can do is define a throttle setting for the replay, which is excellent if you want to test out slow connections, for instance.

Recorder throttle settings

And last but not least, we can export a recording. This will generate a Puppeteer script you can further modify and use.

Recorder export function

Let me know what you think of this new feature.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Chrome DevTools: Recorder

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Finding the Chrome DevTools Recorder

Bonus things

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Finding the Chrome DevTools Recorder

Bonus things

Thank you for reading, and let's connect!