webdriverio/chrome-recorder

Generate WebdriverIO Tests from Google Chrome DevTools Recordings.

WebdriverIO Chrome Recorder

This repo provide tools to convert JSON user flows from Google Chrome DevTools Recorder to WebdriverIO test scripts programmatically (WebdriverIO v7.24.0 or higher required).

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

🏗 Installation

npm install -g @wdio/chrome-recorder

🚀 Usage

To quickly run the interactive CLI, run:

npx @wdio/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 WebdriverIO tests

⚡️ Transform individual recordings

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

⚡️ Transform multiple recordings

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

👉 By default output will be written to webdriverio folder. If you don't have these folders, tool will create it for you or install WebdriverIO by running npm init webdriverio in your project.

You can specify different output directory, specify that via CLI:

npx @wdio/chrome-recorder <path to the chrome devtools recording> --output=<folder-name>

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

import { stringifyChromeRecording } from '@wdio/chrome-recorder';

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

const stringifiedContent = await stringifyChromeRecording(
  JSON.stringify(recordingContent),
);

console.log(stringifiedContent);
// Console Log output
//
// describe('recording', function () {
//   it('tests recording', function (browser) {
//     browser.setWindowRect({ width: 1905, height: 223 });
//   });
// });

🐛 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 WebdriverIO chrome recorder tool

npm install

👷‍♂️ Build the tools using typescript compiler

npm run build

🏃 Run the tool

./bin/wdio-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

WebdriverIO supports all existing StepTypes. If any step type seems to be missing, please raise an issue so we can add it. Thanks!

---

For more information on WebdriverIO see the homepage. The initial implementation was inspired by Nightwatch Chrome Recorder

chrome-recorder's Issues

Duration is not converted

When I use the duration parameter in Chrome Recorder, I'm not able to get this parameter when I convert the Json to the Webdriver script.

Is there a solution for that?

Regards

Update argument name for meow dependency

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @wdio/[email protected] for the project I'm working on.

The dependency "meow" is throwing the following error:

Error: The option `alias` has been renamed to `shortFlag`. The following flags need to be updated: `--output`

Here is the diff that solved my problem:

diff --git a/node_modules/@wdio/chrome-recorder/dist/cli/index.js b/node_modules/@wdio/chrome-recorder/dist/cli/index.js
index 08484db..5e2999b 100644
--- a/node_modules/@wdio/chrome-recorder/dist/cli/index.js
+++ b/node_modules/@wdio/chrome-recorder/dist/cli/index.js
@@ -27,7 +27,7 @@ const cli = meow(`
         },
         output: {
             type: 'string',
-            alias: 'o',
+            shortFlag: 'o',
         },
     },
 });

This issue body was partially generated by patch-package.

Preference for ARIA Selector over XPath Selector

Currently, in the stringifyExtension.ts file, the code for converting JSON user flows into WebdriverIO test scripts prioritizes XPath selectors over ARIA selectors. However, it would be more desirable to have ARIA selectors as the preferred choice.

Steps to Reproduce:

• Create a JSON user flow containing both ARIA and XPath selectors.
• Convert the JSON user flow into a WebdriverIO test script using the chrome-recorder tool.

Expected Behavior:
The generated WebdriverIO test script should prefer ARIA selectors over XPath selectors when both are available.

Actual Behavior:
The current implementation in the getSelector() method of the StringifyExtension class prioritizes XPath selectors over ARIA selectors.

Proposed Solution:
Modify the getSelector() method in stringifyExtension.ts to prioritize ARIA selectors over XPath selectors. This change will ensure that the generated WebdriverIO test scripts use ARIA selectors when available as per the WebdriverIO selectors recommendation.

Add support for text and XPath selector

DevTools Recorder support text and XPath selector from Chrome 108 onwards. I am wondering if there are similar selector in WebdriverIO?

Here is the example step's json.

{
      "type": "click",
      "target": "main",
      "selectors": [
        [
          "aria/Proceed to checkout"
        ],
        [
          "[data-test=checkout]"
        ],
        [
          "xpath///*[@data-test=\"checkout\"]"
        ],
        [
          "text/Total: $0.00"
        ]
      ]
    }