{"id":15808866,"url":"https://github.com/webdriverio/chrome-recorder","last_synced_at":"2025-05-06T20:43:20.230Z","repository":{"id":56860798,"uuid":"526396034","full_name":"webdriverio/chrome-recorder","owner":"webdriverio","description":"Generate WebdriverIO Tests from Google Chrome DevTools Recordings.","archived":false,"fork":false,"pushed_at":"2024-04-08T14:21:45.000Z","size":3093,"stargazers_count":28,"open_issues_count":10,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-14T07:11:15.452Z","etag":null,"topics":["chrome","chrome-extension","recorder","wdio","webdriverio"],"latest_commit_sha":null,"homepage":"https://webdriver.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdriverio.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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},"funding":{"tidelift":"npm/webdriverio","open_collective":"webdriverio"}},"created_at":"2022-08-18T22:52:57.000Z","updated_at":"2024-04-01T04:22:53.000Z","dependencies_parsed_at":"2024-04-14T02:49:37.249Z","dependency_job_id":null,"html_url":"https://github.com/webdriverio/chrome-recorder","commit_stats":{"total_commits":57,"total_committers":8,"mean_commits":7.125,"dds":0.5614035087719298,"last_synced_commit":"f5732c2a2669abd880539a48109fb181a93501c0"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fchrome-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fchrome-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fchrome-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fchrome-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdriverio","download_url":"https://codeload.github.com/webdriverio/chrome-recorder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246034305,"owners_count":20712861,"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":["chrome","chrome-extension","recorder","wdio","webdriverio"],"created_at":"2024-10-05T03:07:57.990Z","updated_at":"2025-03-31T21:30:22.181Z","avatar_url":"https://github.com/webdriverio.png","language":"TypeScript","funding_links":["https://tidelift.com/funding/github/npm/webdriverio","https://opencollective.com/webdriverio"],"categories":[],"sub_categories":[],"readme":"WebdriverIO Chrome Recorder [![Build](https://github.com/webdriverio/chrome-recorder/actions/workflows/test.yml/badge.svg)](https://github.com/webdriverio/chrome-recorder/actions/workflows/build.yml)\n[![npm][npm-badge]][npm]\n===========================\n\nThis repo provide tools to convert JSON user flows from [Google Chrome DevTools Recorder](https://goo.gle/devtools-recorder) to WebdriverIO test scripts programmatically (WebdriverIO `v7.24.0` or higher required).\n\n✅ Converts multiple recordings to WebdriverIO tests in one go (out-of-the-box glob support)  \n🗂 User can pass their custom path to export tests.  \n💃 Users can also use a dry run to see the interim output of the recordings  \n👨‍💻 Programmatic API which users can use in their own project to create plugins or custom scripts.\n\nAlternatively, you can export JSON user flows as WebdriverIO test scripts straight away from Chrome DevTools with our [WebdriverIO Recorder Chrome extension](https://chrome.google.com/webstore/detail/webdriverio-chrome-record/pllimkccefnbmghgcikpjkmmcadeddfn). \n\n## 🏗 Installation\n\n```sh\nnpm install -g @wdio/chrome-recorder\n```\n\n## 🚀 Usage\n\nTo quickly run the interactive CLI, run:\n\n```sh\nnpx @wdio/chrome-recorder\n```\n\n\u003e The CLI will prompt you to enter the path of directory or file of the chrome devtool recordings that you will modify and path to write the generated WebdriverIO tests\n\n**⚡️ Transform individual recordings**\n\n```sh\nnpx @wdio/chrome-recorder \u003cpath to the chrome devtools recording\u003e\n```\n\n**⚡️ Transform multiple recordings**\n\n```sh\nnpx @wdio/chrome-recorder \u003cpath to the chrome devtools recording\u003e*.json\n```\n\n👉 By default output will be written to `webdriverio` folder. If you don't have these folders, tool will create it for you or install WebdriverIO by running `npm init webdriverio` in your project.\n\nYou can specify different output directory, specify that via CLI:\n\n```sh\nnpx @wdio/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 | Output location of the files generated by the exporter |\n\n## 💻 Programmatic API\n\n```javascript\nimport { stringifyChromeRecording } from '@wdio/chrome-recorder';\n\nconst recordingContent = {\n  title: 'recording',\n  steps: [\n    {\n      type: 'setViewport',\n      width: 1905,\n      height: 223,\n      deviceScaleFactor: 1,\n      isMobile: false,\n      hasTouch: false,\n      isLandscape: false,\n    },\n  ],\n};\n\nconst stringifiedContent = await stringifyChromeRecording(\n  JSON.stringify(recordingContent),\n);\n\nconsole.log(stringifiedContent);\n// Console Log output\n//\n// describe('recording', function () {\n//   it('tests recording', function (browser) {\n//     browser.setWindowRect({ width: 1905, height: 223 });\n//   });\n// });\n```\n\n## 🐛 Issues\n\nIssues with this schematic can filed [here](https://github.com/webdriverio/chrome-recorder/issues)\n\nIf you want to contribute (or have contributed in the past), feel free to add yourself to the list of contributors in the package.json before you open a PR!\n\n## 👨‍💻 Development\n\n### Getting started\n\n🛠️ [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) are required for the scripts. Make sure it's installed on your machine.\n\n⬇️ **Install** the dependencies for the WebdriverIO chrome recorder tool\n\n```bash\nnpm install\n```\n\n👷‍♂️ **Build** the tools using typescript compiler\n\n```bash\nnpm run build\n```\n\n🏃 **Run** the tool\n\n```bash\n./bin/wdio-chrome-recorder.js\n```\n\n### 🧪 Unit Testing\n\nRun the unit tests using mocha as a runner and test framework\n\n```bash\nnpm run test\n```\n\n### ♻️ Clean build files\n\n```bash\nnpm run clean\n```\n\n## Supported Chrome Devtools Recorder Steps\n\nWebdriverIO supports all existing [StepTypes](https://github.com/puppeteer/replay/blob/bcee5b54d94ae3fa1398c41d9166892da617eaad/docs/api/enums/Schema.StepType.md). If any step type seems to be missing, please raise an issue so we can add it. Thanks!\n\n[npm-badge]: https://img.shields.io/npm/v/@wdio/chrome-recorder.svg\n[npm]: https://www.npmjs.com/package/@wdio/chrome-recorder\n\n---\n\nFor more information on WebdriverIO see the [homepage](https://webdriver.io). The initial implementation was inspired by [Nightwatch Chrome Recorder](https://github.com/nightwatchjs/nightwatch-chrome-recorder)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdriverio%2Fchrome-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdriverio%2Fchrome-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdriverio%2Fchrome-recorder/lists"}