This repo provide tools to convert JSON user flows from Google Chrome DevTools Recorder to Nightwatch test scripts programmatically.
✅ Converts multiple recordings to Nightwatch tests in one go (out-of-the-box glob support)
🗂 User can pass their custom path to export tests.
💃 Users can also use a dry run to see the interim output of the recordings
👨💻 Programmatic API which users can use in their own project to create plugins or custom scripts.
Alternatively, you can export JSON user flows as Nightwatch test scripts straight away from Chrome DevTools with our Nightwatch Recorder Chrome extension.
See Create Nightwatch test using Google Chrome DevTools Recorder to learn more.
npm install -g @nightwatch/chrome-recorder
To quickly run the interactive CLI, run:
npx @nightwatch/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 Nightwatch tests
⚡️ Transform individual recordings
npx @nightwatch/chrome-recorder <path to the chrome devtools recording>
⚡️ Transform multiple recordings
npx @nightwatch/chrome-recorder <path to the chrome devtools recording>*.json
👉 By default output will be written to nightwatch
folder. If you don't have these folders, tool will create it for you or install nightwatch by running npm init nightwatch
in your project.
You can specify different output directory, specify that via cli
npx @nightwatch/chrome-recorder <path to the chrome devtools recording> --output=<folder-name>
Option | Description |
---|---|
-d, --dry | Dry run the output of the transformed recordings |
-o, --output | Output location of the files generated by the exporter |
import { nightwatchStringifyChromeRecording } from '@nightwatch/chrome-recorder';
const recordingContent = {
title: 'recording',
steps: [
{
type: 'setViewport',
width: 1905,
height: 223,
deviceScaleFactor: 1,
isMobile: false,
hasTouch: false,
isLandscape: false,
},
],
};
const stringifiedContent = await nightwatchStringifyChromeRecording(
JSON.stringify(recordingContent),
);
console.log(stringifiedContent);
// Console Log output
//
// describe('recording', function () {
// it('tests recording', function (browser) {
// browser.windowRect({ width: 1905, height: 223 });
// });
// });
You can find about more about Programmatic API here
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!
🛠️ Node.js and npm are required for the scripts. Make sure it's installed on your machine.
⬇️ Install the dependencies for the nightwatch chrome recorder tool
npm install
👷♂️ Build the tools using typescript compiler
npm run build
🏃 Run the tool
./bin/nightwatch-chrome-recorder.js
Run the unit tests using mocha as a runner and test framework
npm run test
npm run clean
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.