EXPERIMENTAL: Recorder-To-WPT-Script

Script to convert Chrome user flow recordings to WPT Custom Scripts

Takes the path to a recorder JSON file and returns a WebPageTest Custom Script.

Requirements

• Node js

Usage

node index.js sample-recordings/simple-recorder.json

Paste this script into WPT custom script and see the magic happening

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)
• 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
• Puppeteer JS output for reference
• Recorder docs

NOTE

• Only Chrome v101 and above i.e. Google Chrome Developer and Google Chrome Canary exports these json scripts.
• There are some websites having issues with chrome recorder, this issue will be resolved with time as Google developers improve Chrome