Puppeteer

Journeys

Journeys is one of the main benefits of using Puppeteer in Measurements.

Using Chrome DevTools Recorder, you can record and replay user interactions with your website. This means you can measure metrics beyond just the initial page load – scroll down, interact with elements, etc and see INP / CLS / etc.

Recording a Journey

  1. Open Chrome DevTools (F12 or right-click > Inspect)
  2. Go to the Recorder panel (if you don’t see it, click the three dots > More tools > Recorder)
  3. Click “Create a new recording” and click “Start recording”
  4. Perform your actions on the website (e.g., scroll, click, type)
  5. Click “End recording”
  6. Click the three dots next to your recording > “Export as JSON”
  7. Upload this JSON file in the Measurement creation form

Step types supported

The following actions are supported when replaying your recorded journey:

Mouse interactions

  • click: Click on an element
  • doubleClick: Double click on an element
  • hover: Hover over an element

Form interactions

  • change: Type text into an input field

Keyboard actions

  • keyDown: Press a key
  • keyUp: Release a key

Page interactions

  • scroll: Scroll the page or a specific element
  • waitForElement: Wait for an element to appear on the page
  • waitForExpression: Wait for a JavaScript expression to be true

Not supported

  • navigate: The Browser Worker will navigate to the URL given – other MPA navigations won’t work as expected.
  • setViewport: The Browser Worker sets fixed network conditions/viewports for the mobile and the desktop test.