Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/catchpoint/webpagetest.recorder-to-script
Script to convert Chrome user flow recordings to WPT Custom Scripts
https://github.com/catchpoint/webpagetest.recorder-to-script
Last synced: about 1 month ago
JSON representation
Script to convert Chrome user flow recordings to WPT Custom Scripts
- Host: GitHub
- URL: https://github.com/catchpoint/webpagetest.recorder-to-script
- Owner: catchpoint
- Created: 2022-03-11T17:13:59.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-24T14:09:48.000Z (5 months ago)
- Last Synced: 2024-11-10T00:32:51.390Z (about 1 month ago)
- Language: TypeScript
- Size: 782 KB
- Stars: 6
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Learn about more WebPageTest API Integrations in our docs
# WEBPAGETEST CHROME RECORDER
[](#)
This tool will help you to convert JSON user flows from [Google Chrome DevTools Recorder](https://goo.gle/devtools-recorder) to WEBPAGETEST Custom Scripts
Converts recordings to Webpagetest scripts using CLI / Module (Wrapper Funstions).
Check out our [Webpagetest Chrome extension](https://chrome.google.com/webstore/detail/webpagetest-recorder-exte/eklpnjohdjknellndlnepihjnhpaimok) to export JSON user flows as Webpagetest custom scripts straight away from Chrome DevTools.
## 🏗 Installation
```sh
npm install -g webpagetest-chrome-recorder
```
## 🚀 Usage
To quickly run the interactive CLI, run:
```sh
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**
```sh
npx webpagetest-chrome-recorder
```
**⚡️ Transform multiple recordings** (Space delimited)
```sh
npx webpagetest-chrome-recorder
```
👉 By default output will be written to `webpagetest` folder.
You can specify different output directory, specify that via cli
```sh
npx webpagetest-chrome-recorder --output=
```
## ⚙️ CLI Options
| Option | Description |
| ------------ | ------------------------------------------------------ |
| -d, --dry | Dry run the output of the transformed recordings |
| -o, --output | Set Output location for the exports |
## 💻 Programmatic API
```javascript
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](https://developer.chrome.com/docs/devtools/recorder/) for more information on Chrome Recorder
#Open the Recorder panel
- Open DevTools.
- Click on More options --> More tools > Recorder.
#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"
Once that is done, feed the JSON into the recorder script to generate the [WPT custom script](#usage)
## 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](/sample-recordings)
- [Recorder docs](https://developer.chrome.com/docs/devtools/recorder/)
---
**NOTE**
- Only Chrome v101 and above supports export json scripts.
---