Learn to improve user experience with rapidly repeatable tests created with recordings from Chrome DevTools Recorder in the workshop from Applitools.

1. Chrome DevTools
User flow Recorder
@jecfish

2. Top developer pain point
End to end testing

3. Automate
the user
flows
E.g. add to shopping cart, fill in shipment
details
Assert
the
details
E.g. Is the total correct? Is validation
shown?

6. Developer Preview

7. User flow Recorder
Record, replay and measure
user flows

8. 2022 Proprietary & Confidential
E+E
Demo time!

9. That’s cool, but…
Can we…

10. Can I set a longer wait time
between steps?
Timeout
01
Can I specify my own data-* selector?
We have existing test cases.
Custom selector
02
Can I share the user flow with
others easily?
Import / Export
03
Top 3 feature requests

11. Timeout
settings
Set globally or per step

12. Timeout
settings
Set globally or per step

13. Auto-detect
common test
selectors
● data-testid
● data-test
● data-qa
● data-cy
● …

14. Define
custom
selector

15. 2022 Proprietary & Confidential
E+E

16. Export
as JSON
and more.

17. Import JSON

19. Wow, a powerful
combination for bug
reporting!

20. There are more!
🥁🥁🥁

21. Can I convert the JSON
to XYZ?

23. npm install -g @cypress/chrome-recorder

24. npm install -g @cypress/chrome-recorder
# convert JSON to Cypress test
npx @cypress/chrome-recorder user-flow.json

25. Demo: https://youtu.be/4qYs2bMz4GI

26. Powered by the
Puppeteer Replay library

27. Replay JSON file with a line of
command
CLI
01
Customize to do more (e.g. capture
screenshots, integrate with 3rd party
tools like Applitools). Code demo
Customization
02
Transform / Convert the user flows
into other format (e.g Cypress,
TestCafe, Selenium). Code demo
Extendable
03
Puppeteer Replay library

28. Current limitations &
future

29. Not supported (yet)
● Drag and drop
● Selecting text (basically a drag)
● Hover
● Double click, right click
● Not capturing auto-complete data entry

30. Top next feature requests
● Replay recording at a slower speed
● Select a selector by matching on-screen text
● Replay user flows in their preferred viewport
● Control the replay (step through, replay until step x)
● Skip the begining navigation step

31. Keep your
feedback
coming!
goo.gle/devtools-recorder-feedback

32. Automate performance
measurement beyond initial page
load, integrate with Lighthouse

33. How about supporting 3rd party
integration within Chrome DevTools?
● In discussion.
● Could be via Chrome extension, not sure yet.
● Do you have experience / ideas you’d like to share?

34. Thanks! Learn more.
goo.gle/devtools-recorder
goo.gle/puppeteer-replay
Suggest to test in Chrome Canary for latest features and fixes
Twitter: @jecfish,
@ChromeDevTools