Create Nightwatch tests using the Chrome DevTools Recorder

The Chrome DevTools recently introduced a Recorder panel which lets users record their interaction flows and export them as JSON or other formats.

To convert these user flows to Nightwatch test scripts follow these steps:

The following sections help you get started with the Chrome Devtools Recorder and export the user flows to Nightwatch.

What is Chrome DevTools Recorder?

Chrome DevTools Recorder is a tool which allows you to record and replay test actions directly in the browser and also export them as JSON (or export them in e2e test), as well as measure test performance. If you want to know more about the DevTools Recorder, you can read all about it here.

We will use the Coffee Cart website to record our first test and export it as a Nightwatch test script.

Record a test with Chrome DevTools recorder

  • Open the Coffee Cart website. We will use this as a demo page to record our first test.

  • Open Chrome DevTools(you can right-click on the webpage and click on inspect)

  • Now, click on the Recorder panel

    Recorder-panel


  • Click on the Start new recording button to begin recording the test

    Start New Recording



  • Enter your recording name and click on Start a new recording button at the bottom

  • Just play with the website, try to add some of the coffee and then click on the cart. Press total, fill out the payment details and click on the submit button.

    User Action Gif


Remember: Every interaction with the webpage will be recorded by the Recorder, like switching webpage, clicking on a button, double click, and much more.

  • Click on the stop recording button in the recorder after you are done with the recording.

Once the recording is done, we have our first automated recording script ready to run.

We have multiple options before us:

  1. Replay the Recording - you can playback what was recorded
  2. Measure Performance using Performance Panel - It replays the test and opens the Performance Insights panel beside the Recorder panel in the DevTools. We can analyse the website's performance using our recorded tests and the time it took to load and render resources.
  3. Edit and add steps - We can manually edit our test steps. For example, if we want to change the selector, we have a selector tool or add a timeout—all without changing the code.

    Chrome DevTools Recorder



Export the recorded test

You can also export it as a Nightwatch test script right away. There are two ways which you can export the recording as Nightwatch test script:

1. Using Nightwatch Recorder Extension

  • download the extension from Chrome Webstore.
  • install the extension and open the Recorder Panel in the DevTools
  • click on your saved recording, and then click on the export button (Down arrow button)
  • you will see the Export as Nightwatch test script option

    Export Nightwatch Test


- When you click on the option, you have successfully exported your current recording to Nightwatch tests. - Now you can run your first tests with Nightwatch


Run first test




2. Using @nightwatch/chrome-recorder library

You can convert the JSON recording to the Nightwatch test with the following CLI command.

npm install @nightwatch/chrome-recorder

npx @nightwatch/chrome-recorder

The tool will ask for your Devtools recording location and output the result to the specified directory.

CLI question image

The output from the tool will be written to the "Nightwatch" folder. Once we have the test file, we can run the Nightwatch tests using the CLI.

Found an issue? Let us know.

If you find any situations where it generates unexpected results or something seems amiss, please let us know so we can clean them up.

References