Record tests in your Chrome Browser with Chrome Recorder

The Record and Play Market

Being able to automate tests is becoming more and more a must for a tester in today’s society. However, not everyone has the skills and training to write code and therefore to get started with automated tests.

To make the leap to automated testing more accessible for testers the majority of today’s automation solutions offer a record and play functionality. This way a non-technical person can record the actions for a test, make changes via a user-friendly UI and replay them back at a later point in time.

One of the most well-known tools on the market to do automated testing, and also one of the oldest, is actually a browser extension, Selenium IDE.

Google joins the party🚀

For a lot of web users, the word web is a synonym for the word Google. It was just a matter of time until the tech giant entered the test automation tool market with some tools of its own. From the list of web automation tools I would like to mention just a few:

• Protractor  – an end-to-end test framework for Angular and AngularJS applications. Although Protractor was the go-to tool for Angular tests for a long time the team behind the project has announced the end of support in 2022
• Puppeteer – a Node library that provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol.
• Recorder for Chrome – the new tool from google that makes writing tests easy and fun.

Chrome recorder 📼

In order to be able to use the Chrome Recorder, there is only one condition that needs to be met, and that is you need to have Chrome installed. The Chrome Recorder was introduced with Chrome v97 but in order to have the latest version of the Recorder please make sure to have Chrome V103. You can make sure you have the correct version by following one of the below steps:

• Install the latest chrome version from here.
• Update.
  • Go to Help – About Google Chrome.

• Then your version will be updated to the last available.

Activation🛫

Now that you have Chrome installed all that remains before creating our first test is to find or activate the Recorder. In order to do this, the following steps need to be taken:

• Open the DevTools.
  • On Windows press F12.
  • Or right-click on any page and press Inspect.
• 
• Go to the Context menu of the DevTools.

• Select More tools
• Select Recorder
• The Recorder should now be shown in the DevTools

Explore the Recorder🔍

When selecting the Recorder tab in the DevTools the following view will be shown. From here we can perform the following actions:

1. Start Recording by clicking on the plus or on the start new recording button
2. Import an older recording
3. Delete an existing recording

Record a test⏺️

Before we start to record our test it is always recommended to first try the scenario manually. The scenario that we want to record and replay is the following:

• We navigate to https://blog.testproject.io/ 
• We search for the word Chrome
• We select the first entry found

Having manually taken the steps for our test and knowing it all works as expected we can start the test recording.

For this, the first thing we need to do is open the Recorder and click on Start New Recording. As a first step, you need to give a name for the recording, for example, Test Project, and then click on the red Start a new Recording button. Afterward, perform the scenario as you did before and as can be seen in the above image.

Save and check the recording🖥️

While performing the scenario you can see, if you have the Recorder open, that the steps are automatically added to our Recording. Once we have performed all the steps we can click on the End Recording button,

In order to make sure that our test was saved we can check on the upper side of the Recorder that we now have a recording saved.

If we select 1 recording(s) we will see a list of all our recordings. However, since we only have 1 recording at the moment we see that with the option to either replay or delete the recording.

Replay a test↩️

Now that we know the recording was saved we need to make sure that what was Recorder actually works as expected. To check this we will play the Recorded scenario and check that all of the steps are executed.

To play the recorded scenario we have two different options:

• From the Saved recordings section we press the Play Recording button

• From the Saved recordings section we select the Recording and then press the Replay button.

Regardless of the option you select, the test will run and your browser will execute the steps one by one until it either reaches the end of the recording or runs into an issue. Speaking of issues it seems the test actually failed to execute one step. Let us try and fix the issue by changing some replay settings.

Wait longer🥱

In test automation, there is often the issue that a specific element could not be found and interacted with because the system is too slow or some other race conditions. For such situations, we can try as a first fix to increase the timeout.

If you did all the changes as I did you should, unfortunately, still see that the test failed, just this time we have the value 10000 in the error and not the previous 5000.

Make the test slower🐢

Since increasing the timeout did not fix our issue there is one more setting that we can change and check if the issue is then fixed.

The Chrome Recorder gives us the option to simulate network speeds. We can do this by clicking on Replay settings and then updating the value for Network to Slow 3G for example. After the change has been done click on Replay again.

If you did all the changes as I did you should, unfortunately, still, see that the test failed. 

Inspect the test🕵️

Having checked and changed the report settings we can conclude that the reason the test is failing is not due to test flakiness but to the actual logic of the test. In order to find out what exactly is making the test fail we need to see the details of the test.

Check step details 🔎

In order to see the details, we need to click on the arrow next to the step name. Let us do this for the failed click step. There are 3 sections of interest for us:

1. Type – this is the type of action performed, in our case a click
2. Selectors – this shows the selector used to uniquely identify the element on the webpage
3. Asserted events – here we see what checks are performed

The looks of the steps are correct, so we need to have a look at the step before. We do this by clicking on the arrow as we did above. At a first glance of the test details we can, I think, see why the next click will fail. It is due to the fact that it tries to click the same button again, however that cannot be done since the page will change after we perform the first click. It seems here the Recorder made a mistake, but do not worry, we can fix this.

Delete a step❌

In order to fix the extra step that was recorded we can actually remove that step since, as we saw, the click that fails will not only perform the action but will also check that the URL of the page changes.

To delete a step we need to open the context menu of a step and then select Remove step.

Now let us run the test again by hitting the Replay button.

The test passes now 🙂

Export and import a test📥

Once you have a running recording you can export your work and share it with others on your team.

In order to export you need to perform the following steps:

• Select the Recording that you want to export.

• Click on export.

• Select the export type – select JSON File.
• This will download a js file to your system.

Once you have exported your script you can perform changes on it and re-import it later or you can directly send it to others and have them import it into the Recorder.

In order to export you need to perform the following steps:

• Open the previous export.
• Change the name of the Project in the JSON.

• In the Recorder click on Import.

• There should now be a new Recording with the same steps but a different name.

Check performance✔️

Besides being able to record and playback there is also the possibility to check the performance of the website while performing the Recorded scenario.

To do this you need to select your Recording and then press the Performance Panel button.

The Recorder will now run the test step by step and then generate a performance graph that you can investigate and share with others on your team to identify any non-performant areas of the application. Depending on the number of steps and on the website this action may take some time so it is important to have patience.

Conclusion and next steps👇

The Chrome Recorder has the potential to become a standard record and playback tool for web automation due to its easy installation, user-friendly interface, and a growing number of features (timeouts, speed emulation, and performance report just to name a few).

While I did try to present as much as possible the tool and its features in this article I encourage you to try the tool yourself and come back with questions or feedback.

You can either leave a comment on the article or on the official support page.