_edited_edited.png)
Introduction:
In the dynamic world of web development, having the ability to record and replay browser interactions is a game-changer.Whether you are a developer, tester, or just curious about how websites work, understanding the process of recording and replaying in Chrome browsers can significantly enhance your skills.This guide will take you through a step-step by journey to master this valuable skill set.
Why Record and Reply?
Understanding the importance of recording and replaying browser interactions.
Explore use cases for developers, testers, and QA teams.
Steps to record and replay web tests using chrome browsers:
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 with the latest versions.
To access the Developer Tools in the Chrome Browser, you can follow their either of the two methods:
Right-click on any element on the webpage and from the context menu, choose "Inspect".
Alternatively, you can click on the three dots in the top-right corner of the browser to open the menu. From there, hover over "More Tools",and then select "Developer Tools".
Click on More options on the left corner with three dots>More tools>Recorder or you can click the Recorder option in the DevTools next to the 'Lighthouse'.
In this instance, we will utilize the tutorialsninja.com/demo page to capture the registration process.
Clicking on the 'create a new recording' button as shown in above image. As a first step, you need to give a name for the recording as a 'Test1' in the RECORDING NAME and 'id' in the SELECTOR ATTRIBUTE(you can select any attributes) and then click on the red 'Start recording' button.
Afterward, perform the register page scenario by entering all the fields and checkout the product that you want to buy and click the red 'End recording' button at the bottom of the recording page and save the recordings.
After recording a user flow, you can replay it by clicking on the 'Replay' button that was on the right side.
Google Chrome can record the following events:
Clicks
Changes to interactive page elements
Key Down/Key Up events.
In the below screenshot if you want to remove some steps or if you want to add step before or after you can select the option as showed below. According to the steps you can modify and replay the test.
If you made a misclick during recording or something doesn't work, you can debug your user flow:slow down its replay, set a breakpoint, and execute it step by step.When you click the Replay dropdown list box you can see the following options: Normal, Slow, Very slow, Extremely slow, as you can select whatever option you want.
Regardless of the option you select, the test will run and your browser will execute the steps one by one until it reaches the recording, the steps is in green color that means the test passes now.
In order to see the details, we need to click on the arrow, after clicking the arrow it will expand and shows three sections:
Type -this is the type of action performed ,
selectors -this shows the selector used to uniquely identify the element on the webpage,
Asserted events -here we see whats checks are performed.
The below image shows two selectors.
When replaying the user flow, the Recorder tries to query the element with one of the selectors by sequence. For example, if the Recorder successfully queries the element with the first selector, it will skip the second selector and proceed to the next step.
To inspect the code of a user flow in various formats such as open a recording in the Recorder panel, Click
'Show code' in the top right corner of the steps list.
You can select the code to view in the json format or puppeteer scripts.
Once you have a recording you can export your work and share it with others on your team.
Select the recording file that you need to export then hover to the export button.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 the recorder click Import, then import the file.
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 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.
You can click '+' sign on the top left corner to make new recordings
Conclusion:
The Chrome Recorder could become a widely used tool for recording and playing back actions on the web. It's a user-friendly interface. I have covered a lot about the tool and its capabilities in this blog, but the best way to truly understand it is to give it a try yourself. Play around with it, explore its features.
Happy Learning!