WebdriverIO Chrome Recorder
This repo provide tools to convert JSON user flows from Google Chrome DevTools Recorder to WebdriverIO test scripts programmatically (WebdriverIO v7.24.0
or higher required).
Alternatively, you can export JSON user flows as WebdriverIO test scripts straight away from Chrome DevTools with our WebdriverIO Recorder Chrome extension.
🏗
Installation
npm install -g @wdio/chrome-recorder
🚀
Usage
To quickly run the interactive CLI, run:
npx @wdio/chrome-recorder
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
npx @wdio/chrome-recorder <path to the chrome devtools recording>
npx @wdio/chrome-recorder <path to the chrome devtools recording>*.json
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.
You can specify different output directory, specify that via CLI:
npx @wdio/chrome-recorder <path to the chrome devtools recording> --output=<folder-name>
⚙️
CLI Options
Option | Description |
---|---|
-d, --dry | Dry run the output of the transformed recordings |
-o, --output | Output location of the files generated by the exporter |
💻
Programmatic API
import { stringifyChromeRecording } from '@wdio/chrome-recorder';
const recordingContent = {
title: 'recording',
steps: [
{
type: 'setViewport',
width: 1905,
height: 223,
deviceScaleFactor: 1,
isMobile: false,
hasTouch: false,
isLandscape: false,
},
],
};
const stringifiedContent = await stringifyChromeRecording(
JSON.stringify(recordingContent),
);
console.log(stringifiedContent);
// Console Log output
//
// describe('recording', function () {
// it('tests recording', function (browser) {
// browser.setWindowRect({ width: 1905, height: 223 });
// });
// });
🐛
Issues
Issues with this schematic can filed here
If 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!
👨💻
Development
Getting started
npm install
npm run build
./bin/wdio-chrome-recorder.js
🧪
Unit Testing
Run the unit tests using mocha as a runner and test framework
npm run test
♻️
Clean build files
npm run clean
Supported Chrome Devtools Recorder Steps
We only support following steps:
setViewport
navigate
click
change
keyDown
keyUp
scroll
doubleClick
hover
emulateNetworkConditions
waitForElement
If the step type is not mentioned above, a warning will be shown.
For more information on WebdriverIO see the homepage. The initial implementation was inspired by Nightwatch Chrome Recorder