Is Chrome Developer Tool a Future For Test Automation? — Devstringx

Devstringx Technologies
4 min readApr 19, 2022

Devtools is a powerful set of tools that helps web developers to build better applications.

In this blog, we will learn about Recorder Panel.

First, you need to open Devtools. To do this first you need to Press F12 or Rights Click — Inspect.

Now you can click on Recorder. If you are not able to see recorder options in Devtools, then click on three dots from Devtools — More Tools — Recorder. Below is the screenshot of what this chrome recorder looks like.

What Exactly Does This Recorder Panel Does?

This recorder is used for multi-purposes:-

  1. Record all actions that the user performs
  2. You can download this recording
  3. You can replay this recording
  4. You can inject certain steps within the recording how exactly it will be if we make changes
  5. You can measure the performance of each step
  6. You can export the puppeteer (node JS) script

Let’s See How The Google Chrome Recorder Works?

  1. Click On the Start New Recording button and enter the recording name Ex — TestScript
  2. Click On the Start New Recording Red Circle button
  3. Perform a Few Actions on the website like Opening URL, Entering Data, and clicking any button
  4. Once Actions are performed, then click on the End Recording button. This will save our recorded action in “Test Script”
  5. Now you can export your recorded script. It will be in NodeJS and then you can embed it into any application.
  6. You can replay the recording to see all your recorded actions

While replaying the test script, you can change locators for any step, you can add assertions or can add a timeout, etc.

How to Change Selector in Your Recorded Script?

  1. Click On the Arrow icon in your test script for that action
  2. Then click on the element on which you want to perform this action
  3. The selector will automatically get filled in your test script for that element

How to Add Assertions in Recorded Test Script?

Suppose we need to verify that the count displayed on the page should be 6.

Follow the below steps For Assertion:

  • # Click on Three dots and add that step where you need to perform assertion
  • * type: wait for element
  • * selector: {You can add locator on your own}
  • * operator: == {Click on Add Operator button}
  • * count: 6 {Click on Add Count Button}

The above Step will help you to achieve assertion in your test script

Read Also:- Tutorial On Cucumber Automation Tool

Common Selector/Locators Used:

  1. data-testid
  2. data-test
  3. data-qa
  4. data-cy
  5. data-test-id
  6. data-qa-id
  7. data-testing

In Below Screenshot you can see we have a selector for the search element and there we are entering some value

The best part is we can measure the performance of my entire recording. Click On Measure Performance button and then see what’s the outcome

Once we click on the Performance measure button, then it will replay your recorded script. Once script execution is done, then it will redirect us to the Performance tab in Devtools

Every Action has been recorded for his performance. Like how much it is taking for the CPU, where it is taking more time etc.

Now we will record some actions and then download the Puppeteer file for those recorded actions.

Read Also:- Read & Write Data Using Apache POI — JAVA

Actions Performed in Script:

  1. Navigate To google.com
  2. Click on Search Field
  3. Enter “ISTQB certification”
  4. Press Enter Button
  5. Key Up to go to ISTQB Link
  6. Click On the ISTQB link
  7. It redirects to Page — https://www.istqb.org

Recorded all these actions through Chrome Recorder. Now Click on Export Icon From Recorded Tab. It will export puppeteer script

You can find the puppeteer script in the link below. The link is public so you can download it easily

https://drive.google.com/file/d/1FXJNE_x14U6Q9IzeTGAMMraizEDPJAF_/view?usp=sharing

How To Run Puppeteer Script for CLI?

Puppeteer is a Node JS library maintained by google used for web scraping

Prerequisites are:

  1. Node JS
  2. npm

Now Install the Puppeteer library in your project. Run this command in terminal

npm install puppeteer

Now run your test from terminal

node {{test file name}}

In our case the name of the file is TestScript.js. So, we need to run the command

node TestScript.js

The test will be executed and by default puppeteer will run the script in headless mode

If we want to see Script execution on User Interface, then you need to edit the JS script

In the Sample TestScript.JS file, you can see on Line No 4:

const browser = await puppeteer.launch();

Just here we need to add an argument here. Change this line to:

const browser = await puppeteer.launch({headless: false});

Save this file and run it again to see script execution on User Interface

Originally published at https://www.devstringx.com on April 19, 2022.

--

--

Devstringx Technologies

Devstringx Technologies is highly recommended IT company for custom software development, mobile app development and automation testing services