main banner

Development

Selenium Tips and Tricks - How to use Chrome Developer Tools to help you with the analysis and automation of code.

When one is going to get started on an automation project for a web app one of the most powerful tools that can be used is the Chrome Developer tools, yet not many people use it outside of inspecting elements to try and get their locators.

In this blog, I will try to give you some advice and tips on how to use Chrome Developer Tools (abbreviated CDT from now on) to make your work of automating scripts for testing faster and more agile.

 

How to Open CDT


Let’s start from the beginning. How do I open the CDT or inspect an element on a web page?


Imagine you want to make a script that tests results on searches on the https://www.google.com site. First and foremost, for this task, you will need a way to tell the framework you are using (e.g. Selenium) how to locate the search bar element to interact with it. Luckily, for this task, we can use CDT to help us out.


Start the CDT by making right-clicking on the element you want to locate (e.g. Google’s search bar); Next, press on the inspect element option.


Now, the CDT is open and should look something like this:

 

Code 1

The right panel that now shows contains the whole HTML code for the main google page.


The first thing to observe in the image above is that there is a part of the HTML code that is highlighted; this part refers to the element we were looking for that you can also see highlighted on the page.

 

Code 3

 

From the highlighted object we can check many ways to locate our element as if it has a unique name, a title, or what type of element is (input type in this case).


Element search bar or element finder.


The element search bar can be accessed by pressing Ctrl+F on the keyboard while the Element tab is selected on the CDT.

 

Code 4


The element finder will show at the bottom of the Elements tab and will look like this:

 

Code 2


As you can see, the bar is suggesting the methods by which we can find an element on the HTML doc, by string, by selector, or Xpath. So if we know any of these 3 locators of an element we can verify or check if it’s present on the page/document, but also the Element Finder bar it’s a practical way to verify if an Xpath we created is a valid one.

 

An example of this using the Search bar on Google will look like this:


xpath created by us: //input[@title = ‘Buscar’]

 

Code 5

 

The Element search bar is highlighting the object that coincides with the Xpath we provided and also tells us that there is only ‘1 of 1’ element within the coincidences. Therefore, our element is present and also unique in this HTML which is exactly what we would want.


Debug Console setTimeout Command


Many times on web applications we can find that some elements can’t be inspected by the usual method (right click element > inspect element). The cause for why these elements can’t be located may vary but in many cases, it is because the element needs to be active or selected to be visible. Thankfully, CDT has a function in the ‘Console Tab’ that can help us with this.


The setTimeout command on CDT can help us to force a pause on a Web application or Web page after any event happens (e.g. after a click on any element) making the page stop loading or de-loading any object after an action takes place.

 

To use the setTimeout command just go to the console tab and type the command setTimeout(() => {debugger}, 4000). Then, enter the command and do the action you need before the page stops loading and gets paused (e.g. click on a dropdown element):

 

Code 6

 

After the command has entered into action (after the execution of our last action on the page), we will be able to see a sign that says ‘Paused in debugger’, and our current page will be frozen still while this sign is showing.

 

Code 7

 

Now we can inspect by right-clicking on any element of the page that is visible or by using the Elements tab finder on CDT. To exit debugger mode, just click on the Play icon in the Paused in debugger sign/alert.

 

In conclusion

 

The purpose of this blog is to help provide tools that help anyone that wants to or is currently in the world of testing automation. I will try to continue adding more tips and tools about CDT or some Chrome extensions that can help make our work automating scripts easier and more efficient.


You can refer to this URL for some other tips and tricks using CDT:

https://javascript.plainenglish.io/super-useful-tips-and-tricks-of-chrome-developer-tools-8b3c27d3ebca

Daniel N.

Loves video games and good guitar riffs. A QA engineer at day, and an amateur boxer at night.

Articles