{"id":20314892,"url":"https://github.com/catchpoint/webpagetest.recorder-to-script","last_synced_at":"2025-04-11T17:21:00.926Z","repository":{"id":41966594,"uuid":"468837841","full_name":"catchpoint/WebPageTest.recorder-to-script","owner":"catchpoint","description":"Script to convert Chrome user flow recordings to WPT Custom Scripts","archived":false,"fork":false,"pushed_at":"2024-07-24T14:09:48.000Z","size":801,"stargazers_count":6,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-21T10:19:18.061Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/catchpoint.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-11T17:13:59.000Z","updated_at":"2024-07-24T14:08:14.000Z","dependencies_parsed_at":"2024-07-22T10:05:34.788Z","dependency_job_id":null,"html_url":"https://github.com/catchpoint/WebPageTest.recorder-to-script","commit_stats":null,"previous_names":["webpagetest/recorder-to-wpt-script"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catchpoint%2FWebPageTest.recorder-to-script","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catchpoint%2FWebPageTest.recorder-to-script/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catchpoint%2FWebPageTest.recorder-to-script/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catchpoint%2FWebPageTest.recorder-to-script/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catchpoint","download_url":"https://codeload.github.com/catchpoint/WebPageTest.recorder-to-script/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248447609,"owners_count":21105140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T18:17:06.611Z","updated_at":"2025-04-11T17:21:00.895Z","avatar_url":"https://github.com/catchpoint.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg width=\"100%\" alt=\"Webpagetest Chrome Recorder\" src=\"assets/Banner-docs.jpg\"\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://docs.webpagetest.org/api/integrations/#officially-supported-integrations\"\u003eLearn about more WebPageTest API Integrations in our docs\u003c/a\u003e\u003c/p\u003e\n\n#  WEBPAGETEST CHROME RECORDER\n\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](#)\n\nThis tool will help you to convert JSON user flows from [Google Chrome DevTools Recorder](https://goo.gle/devtools-recorder) to WEBPAGETEST Custom Scripts\n\nConverts recordings to Webpagetest scripts using CLI / Module (Wrapper Funstions).\n\n\nCheck 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.\n\n\n## 🏗 Installation\n\n```sh\nnpm install -g webpagetest-chrome-recorder\n```\n\n## 🚀 Usage\n\nTo quickly run the interactive CLI, run:\n\n```sh\nnpx webpagetest-chrome-recorder\n```\n\n\u003e 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.\n\n**⚡️ Transform individual recordings**\n\n```sh\nnpx webpagetest-chrome-recorder \u003cpath to the chrome devtools recording\u003e\n```\n\n**⚡️ Transform multiple recordings** (Space delimited)\n\n```sh\nnpx webpagetest-chrome-recorder \u003cpath.json\u003e \u003cpath.json\u003e\n```\n\n👉 By default output will be written to `webpagetest` folder.\n\nYou can specify different output directory, specify that via cli\n\n```sh\nnpx webpagetest-chrome-recorder \u003cpath to the chrome devtools recording\u003e --output=\u003cfolder-name\u003e\n```\n\n## ⚙️ CLI Options\n\n| Option       | Description                                            |\n| ------------ | ------------------------------------------------------ |\n| -d, --dry    | Dry run the output of the transformed recordings       |\n| -o, --output | Set Output location for the exports                    |\n\n## 💻 Programmatic API\n\n```javascript\nimport { WPTStringifyChromeRecording } from \"webpagetest-chrome-recorder\";\n\nconst recording = {\n  title: \"recording\",\n  steps: [\n    {\n      type: \"setViewport\",\n      width: 812,\n      height: 609,\n      deviceScaleFactor: 1,\n      isMobile: false,\n      hasTouch: false,\n      isLandscape: false,\n    },\n    {\n      type: \"navigate\",\n      url: \"https://timkadlec.com/\",\n      assertedEvents: [\n        {\n          type: \"navigation\",\n          url: \"https://timkadlec.com/\",\n          title: \"TimKadlec.com - Web Performance Consulting | TimKadlec.com\",\n        },\n      ],\n    },\n  ],\n};\n\nconst customScript = await WPTStringifyChromeRecording(recording);\n\nconsole.log(customScript);\n\n\n//setViewportSize 812 609\n//setEventName Navigate\n//navigate https://timkadlec.com/\n//# recorderSourceMap=BABBC\n```\n\n## Steps to obtain Chrome user flow recordings\n\nRefer to [Recorder docs](https://developer.chrome.com/docs/devtools/recorder/) for more information on Chrome Recorder\n\n\u003ch3\u003e#Open the Recorder panel\u003c/h3\u003e\n\n- Open DevTools.\n- Click on More options --\u003e More tools \u003e Recorder.\n\n![Screenshots of Script](/assets/images/open_dev-1.png)\n\n\u003ch3\u003e#Export the JSON\u003c/h3\u003e\n\n---\n**NOTE**\n- Only Chrome v101 and above i.e. Google Chrome Developer and Google Chrome Canary exports these json scripts.\n- Make sure that your recording plays back correctly in Chrome before feeding it into The Recorder Script (To obtain the expected outcome)\n\n---\n\nAfter you are done with the recording\n\n- Click on export icon and select \"Export as a JSON file\"\n\n![Screenshots of Script](/assets/images/export-json.png)\n\nOnce that is done, feed the JSON into the recorder script to generate the [WPT custom script](#usage)\n\n\n## Currently Supported Recorder Commands\n\n- `navigate` (maps to `navigate`)\n- `setViewport` (maps to `setViewportSize`)\n- `click` (maps to `execAndWait`)\n- `change` (maps to `execAndWait`)\n- `keydown` (maps to `execAndWait`)\n- `keyup` (maps to `execAndWait`)\n- `waitForElement` (maps to `waitFor`)\n- `waitForExpression` (maps to `waitFor`)\n- `doubleClick` (maps to `execAndWait`)\n- `scroll` (maps to `execAndWait`)\n\n## Resources\n- [Sample JSON recordings](/sample-recordings)\n- [Recorder docs](https://developer.chrome.com/docs/devtools/recorder/)\n\n---\n**NOTE**\n- Only Chrome v101 and above supports export json scripts.\n\n---\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatchpoint%2Fwebpagetest.recorder-to-script","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatchpoint%2Fwebpagetest.recorder-to-script","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatchpoint%2Fwebpagetest.recorder-to-script/lists"}