webpagetest-chrome-recorder

Learn about more WebPageTest API Integrations in our docs

WEBPAGETEST CHROME RECORDER

This tool will help you to convert JSON user flows from Google Chrome DevTools Recorder to WEBPAGETEST Custom Scripts

Converts recordings to Webpagetest scripts using CLI / Module (Wrapper Funstions).

Check out our Webpagetest Chrome extension to export JSON user flows as Webpagetest custom scripts straight away from Chrome DevTools.

🏗 Installation

npm install -g webpagetest-chrome-recorder

🚀 Usage

To quickly run the interactive CLI, run:

npx webpagetest-chrome-recorder

The CLI will prompt you for the path to the chrome devtool recordings you wish to modify and the location to write the Nightwatch tests.

⚡️ Transform individual recordings

npx webpagetest-chrome-recorder <path to the chrome devtools recording>

⚡️ Transform multiple recordings (Space delimited)

npx webpagetest-chrome-recorder <path.json> <path.json>

👉 By default output will be written to webpagetest folder.

You can specify different output directory, specify that via cli

npx webpagetest-chrome-recorder <path to the chrome devtools recording> --output=<folder-name>

⚙️ CLI Options

Option	Description
-d, --dry	Dry run the output of the transformed recordings
-o, --output	Set Output location for the exports

💻 Programmatic API

import { WPTStringifyChromeRecording } from "webpagetest-chrome-recorder";

const recording = {
  title: "recording",
  steps: [
    {
      type: "setViewport",
      width: 812,
      height: 609,
      deviceScaleFactor: 1,
      isMobile: false,
      hasTouch: false,
      isLandscape: false,
    },
    {
      type: "navigate",
      url: "https://timkadlec.com/",
      assertedEvents: [
        {
          type: "navigation",
          url: "https://timkadlec.com/",
          title: "TimKadlec.com - Web Performance Consulting | TimKadlec.com",
        },
      ],
    },
  ],
};

const customScript = await WPTStringifyChromeRecording(recording);

console.log(customScript);


//setViewportSize 812 609
//setEventName Navigate
//navigate https://timkadlec.com/
//# recorderSourceMap=BABBC

Steps to obtain Chrome user flow recordings

Refer to Recorder docs for more information on Chrome Recorder

#Open the Recorder panel

• Open DevTools.
• Click on More options --> More tools > Recorder.

#Export the JSON

---

NOTE

• Only Chrome v101 and above i.e. Google Chrome Developer and Google Chrome Canary exports these json scripts.
• Make sure that your recording plays back correctly in Chrome before feeding it into The Recorder Script (To obtain the expected outcome)

---

After you are done with the recording

• Click on export icon and select "Export as a JSON file"

Once that is done, feed the JSON into the recorder script to generate the WPT custom script

Currently Supported Recorder Commands

• navigate (maps to navigate)
• setViewport (maps to setViewportSize)
• click (maps to execAndWait)
• change (maps to execAndWait)
• keydown (maps to execAndWait)
• keyup (maps to execAndWait)
• waitForElement (maps to waitFor)
• waitForExpression (maps to waitFor)
• doubleClick (maps to execAndWait)
• scroll (maps to execAndWait)

Resources

• Sample JSON recordings
• Recorder docs

---

NOTE

• Only Chrome v101 and above supports export json scripts.

---