Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nightwatchjs/nightwatch-chrome-recorder

Generate Nightwatch Tests from Google Chrome DevTools Recorder
https://github.com/nightwatchjs/nightwatch-chrome-recorder

automation e2e nightwatch testing

Last synced: about 2 months ago
JSON representation

Generate Nightwatch Tests from Google Chrome DevTools Recorder

Awesome Lists containing this project

README 

        
# Nightwatch Chrome Recorder



[![Build](https://github.com/vaibhavsingh97/nightwatch-chrome-recorder/actions/workflows/build.yml/badge.svg)](https://github.com/vaibhavsingh97/nightwatch-chrome-recorder/actions/workflows/build.yml)

[![npm][npm-badge]][npm]

[![Discord][discord-badge]][discord]



This repo provide tools to convert JSON user flows from [Google Chrome DevTools Recorder](https://goo.gle/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](https://chrome.google.com/webstore/detail/nightwatch-chrome-recorde/nhbccjfogdgkahamfohokdhcnemjafjk/).



See [Create Nightwatch test using Google Chrome DevTools Recorder](https://nightwatchjs.org/guide/writing-tests/chrome-devtools-recorder.html) to learn more.



## 📹 Demo



![Nightwatch Chrome Recorder Demo](.github/assets/demo.gif)



## 🏗 Installation



```sh

npm install -g @nightwatch/chrome-recorder

```



## 🚀 Usage



To quickly run the interactive CLI, run:



```sh

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**



```sh

npx @nightwatch/chrome-recorder 

```



**⚡️ Transform multiple recordings**



```sh

npx @nightwatch/chrome-recorder *.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



```sh

npx @nightwatch/chrome-recorder  --output=

```



## ⚙️ 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



```javascript

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 });

//   });

// });

```



## 📝 Documentation



You can find about more about Programmatic API [here](docs/README.md)



## 🐛 Issues



Issues with this schematic can filed [here](https://github.com/nightwatchjs/nightwatch-chrome-recorder/issues)



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



🛠️ [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.



⬇️ **Install** the dependencies for the nightwatch chrome recorder tool



```bash

npm install

```



👷‍♂️ **Build** the tools using typescript compiler



```bash

npm run build

```



🏃 **Run** the tool



```bash

./bin/nightwatch-chrome-recorder.js

```



### 🧪 Unit Testing



Run the unit tests using mocha as a runner and test framework



```bash

npm run test

```



### ♻️ Clean build files



```bash

npm run clean

```



## Supported Chrome Devtools Recorder Steps



We only support following steps:



1. `setViewport`

2. `navigate`

3. `click`

4. `change`

5. `keyDown`

6. `keyUp`

7. `scroll`

8. `doubleClick`

9. `hover`

10. `emulateNetworkConditions`

11. `waitForElement`



If the step type is not mentioned above, a warning will be shown.



[npm-badge]: https://img.shields.io/npm/v/@nightwatch/chrome-recorder.svg

[npm]: https://www.npmjs.com/package/@nightwatch/chrome-recorder

[discord-badge]: https://img.shields.io/discord/618399631038218240.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square

[discord]: https://discord.gg/SN8Da2X