npm package: @owloops/chrome-recorder
Description: Generate Owloops Tests from Chrome DevTools Recordings
Author: Owloops
Latest version: 1.1.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @owloops/chrome-recorder

[![npm version](https://img.shields.io/npm/v/@owloops/chrome-recorder)](https://www.npmjs.com/package/@owloops/chrome-recorder) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

This repo provides tools to export Owloops Tests from [Google Chrome DevTools' Recordings](https://goo.gle/devtools-recorder) programmatically.

Install [Owloops Chrome Recorder extension](https://github.com/Owloops/owloops-extension) if you want to export the recordings directly from the Chrome DevTools' Recorder UI.

[![Owloops Chrome Recorder Demo](https://i.imgur.com/q2puIEv.png)](https://youtu.be/T2Wvx_yilg8)

## Prerequisites

In order to export JSON files from Chrome DevTools Recorder you will need to be on Chrome 101 or newer.

`dblClick` and `rightclick` require Chrome 103 or newer.

## Installation

```sh
npm install -g @owloops/chrome-recorder
```

## Usage

### Via CLI

To use the interactive CLI, run:

```sh
npx @owloops/chrome-recorder
```

The CLI will prompt you to enter the path of the directory or file that you would like to modify as well as a path to write the generated Owloops test to.

If you prefer to enter paths via the CLI, you can run the following command to export individual recordings:

```sh
npx @owloops/chrome-recorder <relative path to target test file>
```

or for folders containing multiple recordings:

```sh
npx @owloops/chrome-recorder <relative path to target test folder>/*.json
```

By default the output will be written to `owloops/integration` with a fallback to `owloops/e2e`. If you do not have those folders, create them manually or install Owloops by running `yarn add -D owloops` or `npm install --save-dev owloops` in your project.

If you prefer a different output directory, specify that via CLI:

```sh
npx @owloops/chrome-recorder <relative path to target test folder>/*.json --output=folder-name
```

or via the interactive CLI prompts.

### CLI Options

| Option       | Description                                               |
| ------------ | --------------------------------------------------------- |
| -f, --force  | Bypass Git safety checks and force exporter to run        |
| -d, --dry    | Dry run (no changes are made to files)                    |
| -o, --output | Output location of the files generated by the exporter    |
| -p, --print  | Print transformed files to stdout, useful for development |

### Via Import

```js
import { owloopsStringifyChromeRecording } from '@owloops/chrome-recorder';

const stringifiedContent = await owloopsStringifyChromeRecording(
  recordingContent
);

return stringifiedContent;
```

## Supported Chrome Recorder Step Types

Below are the step types that are currently supported:

| Type                | Description                                   |
| ------------------- | --------------------------------------------- |
| change              | become input action                           |
| click               | becomes click action                          |
| click (right click) | becomes click action                          |
| doubleClick         | becomes click action                          |
| hover               | _not exported at this time_                   |
| keyDown             | becomes either enter or tab action            |
| navigate            | becomes goto action                           |
| setViewport         | becomes set-viewport action                   |
| scroll              | _not exported at this time_                   |

If a step type is not listed above, then a warning message should be displayed in the CLI. We are working on adding more steps.

## License

[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/Owloops/owloops-chrome-recorder/blob/master/LICENSE)

This project is licensed under the terms of the [MIT license](/LICENSE).

## Credits

The initial implementation was inspired by [Cypress Chrome Recorder](https://github.com/cypress-io/cypress-chrome-recorder)