Record and replay user flow with the Recorder panel #DevToolsTips

Learn how to record, replay and audit user flows with the Recorder panel in DevTools.

Chapters:
0:00 - Intro
0:17 - Start a new recording
0:34 - Record a user flow
0:59 - Replay the user flow
1:09 - Edit a step
1:47 - Export to Puppeteer script
2:01 - Measure performance of the user flow

Links:

Questions? Tweet to us:

#DevToolsTips #Chrome #Developer

[RideTheTeacups]

This is MAGIC. Please add an “Export To React-Testing-Library” button, and my life is complete.

[gokulkrishh]

Such a powerful feature for debugging and sharing bug reports with realtime step to reproduce.

[TheNewton]

Game changing barrier to entry with something like this being browser native means ownership of such testing can be ran by other stakeholders and not trapped inside full test suites needing the time of web-dev's or quality assurance.
So if marketing wants to add a banner/badge/interaction/etc then with a little tutorial or with quick screen share those non-experts can be shown how to set up basic tests to run for validating changes they make for feasibility BEFORE jamming up any backlog; all without needing to be taught about web-drivers or learn things like auto-it, install special software, or sign up more accounts to complicated services.

[dmitrypichugin]

Omg, it may be very usable feature for UI testing.

[cheahmengyew]

Proud to see a Malaysian giving her best, thanks for the introduction to this tooltip.

[iam_ck]

This used to be my first chrome extension project record and reply testing.
However I had an extra step where in you can add programmatically assert on ui elements

[luissaybe]

If you release a javascript API for this feature, it would be a game changer.
While there are other 3rd party libraries that can do this, just having it natively in the browser would make it so much easier to export it to a file format to understand why users are dropping off a certain funnel & share with product team

[marcelionasco]

Thank You For The AWEsome Experience !!! Very Good Presentation !!!

[Bobby.Kristensen]

Awesome! Coming with Google Chrome 97, release date: Jan. 4, 2022

[JYESH]

Woohoo!!
Indeed a Game-Changing feature for any sort of UI and Usability Testing.👏👏

[jonathanX]

I actually wish there was actually a Javascript API to do this. Would be highly helpful for websites that shows different screens based on user, as well as help with fixing bugs on your websites that you haven't seen.

[AfhamnaExplains]

Do we have an option to change the environment from "Desktop" to "Mobile View" when replaying?

[oleksandrpersonalstuff]

Thanks for the great intro into Recorder feature.
Wanted to ask if it is possible to use this feature for remote targets somehow? Didn't found this panel while using inspector for debugging my ionic cordova app... :(

[StephenBeale]

Export button does not currently work (I have an up-to-date version of Chrome) - after I've recorded, clicking the Export button just shows 'Get extensions' which then links to relevant extensions in Chrome Extension Marketplace, yet none of those seem to work either. Any help appreciated (too early for GPTs to solve either, it seems!)

[Mohitbawari]

Hi,
Do we have any plan to add actions like verify text or verify any attribute, same as we have in selenium IDE or any other recorder tool?

Thanks.

[AD-kvkj]

Sorry for the ignorance, but can someone please explain what this feature is actually for? The window sometimes pops up accidentally and I still don't get what it's point is. Record what you're doing on a web page and then alter it with script instead of just...doing it on the webpage normally? And why would you want to share script with others showing what you did on a website?

[espiat]

Which Chrome Version? I cant see / use the command.

[carpediemalp]

It's very usefull tool. Thank you. ❤

[AndrewForeman]

Oh this is great! Thanks! Also happy new year to your and your colleagues! See you next year!

[dwand]

Awesome feature. I was waiting for it.