Skip to content

Script to convert Chrome user flow recordings to WPT Custom Scripts

Notifications You must be signed in to change notification settings

catchpoint/WebPageTest.recorder-to-script

Repository files navigation

Webpagetest Chrome Recorder

Learn about more WebPageTest API Integrations in our docs

WEBPAGETEST CHROME RECORDER

contributions welcome

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.

Screenshots of Script

#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"

Screenshots of Script

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


NOTE

  • Only Chrome v101 and above supports export json scripts.

About

Script to convert Chrome user flow recordings to WPT Custom Scripts

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •