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 DevTools.
• Click on More options --> More tools > Recorder.

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.