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

Supported step types

The following actions are supported when replaying your recorded journey:

Mouse interactions

  • click: Click on an element with support for specific mouse buttons and offsets
  • doubleClick: Double click on an element
  • hover: Hover over an element

Form interactions

  • change: Type text into an input field or change a form element’s value

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, with support for counting, visibility conditions, and property/attribute matching
  • waitForExpression: Wait for a JavaScript expression to be true

Unsupported step types

The following step types are either unsupported or handled differently in SideQuick:

  • setViewport: The Browser Worker sets fixed network conditions/viewports for the mobile and the desktop test.
  • emulateNetworkConditions: The Browser Worker sets the network conditions for the mobile and the desktop test.
  • close: The Brower Worker needs to continue running after the journey ends to extract metrics.
  • navigate: The Browser Worker will navigate to the URL given.
    • If any actions (e.g. click) trigger a MPA navigation on the top frame, filmstrip/har will contain all requests from the entire user flow, but Web Vitals will be limited to the last navigation only.