Wptrectest NPM

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.

Screenshots of Script

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