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:
- Install the Nightwatch Recorder Extension and export it straight away from the Chrome DevTools, or
- Use the @nightwatch/chrome-recorder library to convert the scripts programmatically.
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
Click on the Start new recording button to begin recording the test
- 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.
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:
- Replay the Recording - you can playback what was recorded
- 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.
- 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.
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
- 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
You can convert the JSON recording to the Nightwatch test with the following CLI command.
The tool will ask for your Devtools recording location and output the result to the specified directory.
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.
- File an issue for Nightwatch Recorder Extension
- File an issue for