chrome-recorder-json-to-playwright

This repo provides a tool to convert Google Chrome DevTools' Recordings JSON export to Playwright code.

Installation

$ npm install -g chrome-recorder-json-to-playwright

Usage

Via CLI

To use the interactive CLI, run:

$ npx chrome-recorder-json-to-playwright

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 playwright tests to.

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

$ npx chrome-recorder-json-to-playwright <relative path to target test file>

or for folders containing multiple recordings:

$ npx chrome-recorder-json-to-playwright <relative path to target test folder>/*.json

By default the output will be written to a playwright folder in the current working directory.

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

$ npx chrome-recorder-json-to-playwright <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

import { playwrightStringifyChromeRecording } from "chrome-recorder-json-to-playwright";

const stringifiedContent = await playwrightStringifyChromeRecording(
  recordingContent
);

return stringifiedContent;

Supported Chrome Recorder Step Types

Below are the step types that are currently supported:

| Type | Description | | ------------------- | ----------------------------------------------------------------- | | change | becomes page.locator("element").fill("text") | | click | becomes page.locator("element").click(); | | click (right click) | becomes page.locator("element").click({ button: 'right' }); | | doubleClick | becomes page.locator("element").dblclick(); | | hover | becomes page.locator("element").hover(); | | keyDown | becomes page.keyboard.down("{key}") | | keyUp | not exported at this time | | navigate | becomes await page.goto("url") | | setViewport | becomes await page.setViewportSize({ width, height }) | | scroll | becomes await page.mouse.wheel(x, y) |

If a step type is not listed above, then a warning message should be displayed in the CLI.

License

This project is licensed under the terms of the MIT license.