https://github.com/catchpoint/webpagetest.recorder-chrome-extension

A Chrome extension for outputting user recording sessions as WebPageTest Custom Scripts
https://github.com/catchpoint/webpagetest.recorder-chrome-extension

Last synced: about 2 months ago
JSON representation

A Chrome extension for outputting user recording sessions as WebPageTest Custom Scripts

• Host: GitHub
• URL: https://github.com/catchpoint/webpagetest.recorder-chrome-extension
• Owner: catchpoint
• Created: 2022-08-08T17:41:21.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-16T13:22:10.000Z (8 months ago)
• Last Synced: 2024-05-17T10:56:36.811Z (8 months ago)
• Language: JavaScript
• Size: 17.3 MB
• Stars: 5
• Watchers: 7
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# WEBPAGETEST RECORDER EXTENSION

An extension for Chrome Recorder to export a recorder session as a WebPageTest Custom Script.

Download [WPT RECORDER EXTENSION](https://chrome.google.com/webstore/detail/webpagetest-recorder-exte/eklpnjohdjknellndlnepihjnhpaimok) using `Add to Chrome` button. 

#

![How to use the recorder extension](/assets/video/export-extension.gif)

### Support for Replay UI (Beta)

Now you can directly replay your recording using Webpagetest (Chrome 112 onwards)

![How to use the recorder replay UI](/assets/video/replay-ui.gif)

---

**NOTE**

- This extension is only compatible with Chrome v104 and above.

- Before exporting the script, ensure your recording plays back correctly in Chrome (to obtain the expected result).

  

---

## Generate your script using extension

1. Open the Recorder panel


- Open DevTools.

- Click on More options --> More tools > Recorder.

![Open Recorder](/assets/images/open_dev-1.png)

2. Start a new recording


- Enter recording name.

- Click on start recording button.

- Start surfing on the internet to register your events.

- End recording.

![Start new recording](/assets/images/newrec.png)

Refer to this link: https://developer.chrome.com/docs/devtools/recorder/ to learn more about Chrome Recorder

3. Export your script


After you are done with the recording

- Click on export icon and select "Export as a Webpagetest custom script"

![Export Script](/assets/images/export.png)

4. Run Webpagetest test using script


- Open https://www.webpagetest.org

- Scroll down to custom script section and paste your WPT script.

![Run Script](/assets/images/script.png)

- Hit Start Test Button

Now you have successfully generated a Webpagetest Custom Script using WEBPAGETEST RECORDER EXTENSION and Run a Webpagetest Test. Play around with the extension and have fun.

## Testing

1. Clone the repo, run `npm run build`

2. Visit chrome://extensions

3. Enable "Developer mode" via toggle switch in upper right corner

4. Click "Load unpacked" button in upper left corner

5. Select the `build` directory produced by `npm run build`

## 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 exported script](/REI%20Product%20Flow)

- [Main Recorder-to-WPT repo](https://github.com/WebPageTest/Recorder-To-WPT-Script)

- [Recorder docs](https://developer.chrome.com/docs/devtools/recorder/)