Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nightwatch/chrome-recorder

Package Overview
Dependencies
Maintainers
4
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nightwatch/chrome-recorder

Generate Nightwatch Tests from Google Chrome DevTools Recordings

  • 0.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-94.44%
Maintainers
4
Weekly downloads
 
Created
Source

Nightwatch Chrome Recorder

Build npm Discord

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.

📹 Demo

Nightwatch Chrome Recorder Demo

🏗 Installation

npm install -g @nightwatch/chrome-recorder

🚀 Usage

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>

⚙️ CLI Options

OptionDescription
-d, --dryDry run the output of the transformed recordings
-o, --outputOutput location of the files generated by the exporter

💻 Programmatic API

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

🐛 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

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

🧪 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:

  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.

Keywords

FAQs

Package last updated on 18 Jan 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc