0.1.4 โ€ข Published 2 years ago

@katalon/chrome-recorder v0.1.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Katalon Chrome Recorder

Build npm

This repo provide tools to convert JSON user flows from Google Chrome DevTools Recorder to Katalon test scripts programmatically.

โœ… Converts multiple recordings to Katalon 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 Katalon test scripts straight away from Chrome DevTools with our Katalon Recorder Chrome extension.

See Create Katalon test using Google Chrome DevTools Recorder to learn more.

๐Ÿ— Installation

npm install -g @katalon/chrome-recorder

๐Ÿš€ Usage

To quickly run the interactive CLI, run:

npx @katalon/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 Katalon tests

โšก๏ธ Transform individual recordings

npx @katalon/chrome-recorder <path to the chrome devtools recording>

โšก๏ธ Transform multiple recordings

npx @katalon/chrome-recorder <path to the chrome devtools recording>*.json

๐Ÿ‘‰ By default output will be written to katalon folder. If you don't have these folders, tool will create it for you or install katalon by running npm init katalon in your project.

You can specify different output directory, specify that via cli

npx @katalon/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 { katalonStringifyChromeRecording } from '@katalon/chrome-recorder';

const recordingContent = {
  title: 'recording',
  steps: [
    {
      type: 'setViewport',
      width: 1905,
      height: 223,
      deviceScaleFactor: 1,
      isMobile: false,
      hasTouch: false,
      isLandscape: false,
    },
  ],
};

const stringifiedContent = await katalonStringifyChromeRecording(
  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 katalon chrome recorder tool

npm install

๐Ÿ‘ทโ€โ™‚๏ธ Build the tools using typescript compiler

npm run build

๐Ÿƒ Run the tool

./bin/katalon-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. scroll
  7. hover
  8. waitForElement

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