DevTools Tips for Automation Testing

In the realm of software testing, automation has become an indispensable practice for ensuring the reliability, functionality, and performance of web applications. Among the arsenal of tools available to testers, browser Development Tools stand out as a powerful resource not only for developers but also for test automation engineers. These tools, integrated directly into modern web browsers, offer a suite of features designed to facilitate the inspection, manipulation, and analysis of web page elements and behaviors.

This paper delves into the various benefits that browser Development Tools bring to automation testing. By understanding and leveraging the capabilities of these tools, testing teams can streamline their workflows, identify and address issues promptly, and ultimately deliver superior web experiences to users.

Summary:

1. Simulate mobile devices
2. Simulate network speeds
3. Get locators of tooltips or hoverable dropdown menu
4. Perform Javascript code on the website and common Javascript statements
5. Get the value of an expression in real-time

1. Simulate mobile devices

This part will help you check the UI with a specific screen (the responsive of website)

• Open the development tools, click on the Elements tab
• Click on the Toggle Device Toolbar
• On this screen, you can: select the dimension based on the mobile type or custom the specific dimension, set the network speed, or change orientation

2. Simulate network speeds

In the Network tab, you can set the Network speed you want to use. This way will help you see the website’s performance. As an automation engineer, you can use the slow 3G to get locators like loading icons. With slow 3G, the loading icon will be displayed more slowly and you will have enough time to stop the page and get the locator.

3. Get locators of tooltips or hoverable dropdown menu

With elements that always need to hover for presence in HTML (like tooltips or hoverable dropdown menus), you will never get its locator if you don’t stop the webpage when it is present. To stop the page, you can use the Debug mode by ?

• pressing F8 or Ctrl + \?
• clicking on the Pause Script Execution button in the Sources tab

Sometimes, it doesn’t work. Therefore, the setTimeout for Debug mode will help you. To set the timeout for Debug mode, let’s use these below commands in the Console and while the timeout runs, let’s hover over your target element

setTimeout(() => { debugger; }, 5000)        

or

setTimeout(function () => { debugger; }, 5000)        

5000 is a timeout for turning on the debugger (milliseconds)

4. Perform Javascript code on the website

In some cases, instead of using Selenium methods, you have to use Javascript statements.

For example: click on the hidden or un-displayed elements, or get the website’s state. You can try these statements by entering them into the Console tab of Development Tools before moving them to your scripts. Below is the Javascript statement I usually use:

• Get website information

document.domain
document.URL
document.title        

• Get the website’s innerText

document.documentElement.innerText        

• Browser Actions

location.reload()                       //reload the current page
history.forward()                       //forward to the next page
history.back()                          //back to the previous page
window.open()                           //open new tab
window.close()                          //close the current tab
screen.height and screen.width          //get the dimension of screen        

• Scroll functions

window.scrollTo(0, -document.body.scrollHeight)   //Scroll up to top
window.scrollTo(0, document.body.scrollHeight)    //Scroll down to bottom
window.scrollTo(0, document.body.scrollHeight/3)  //Scroll to middle
element.scrollIntoView(true)                      //Scroll to element
element.scrollIntoView(false)                     //scroll to element        

The difference between element.scrollIntoView(true) and element.scrollIntoView(false) is the position after scrolling. With true arguments, the found element will be scrolled up to the top, on the contrary, it will be down the page bottom

To get elements, you can use:

$x("https://button[@class='search']")[0]        

Includes //button[@class='search'] is a locator example. $x() will return a found elements list. To get elements, let's use the index [index].

In other ways, if ID exists, you can get elements by using

document.getElementByID("id_value")        

• Interact with elements

// click to element
element.click()

// set attribute value for element
element.setAttribute(“attribute_name”, “value”)

// remove attribute value of element
element.removeAttribute(“attribute_name”)

// get "value" and "checked" attribute 
element.value
element.checked        

• Set timeout for debugger

setTimeout(function () {debugger;}, 5000)
setTimeout(() => {debugger;}, 5000)        

• Verify page ready

(window.jQuery != null) && (jQuery.active ===0)        

This value will be true If the page is ready

• Get the page’s state

document.readyState        

5. Get the value of an expression in real-time

You can get the value of the Javascript statement in real-time by creating live expression. In the Console tab, click on Eye-icon (create live expression) and the live expression will show. So you can follow the value of expression in real-time when the website runs.

Browser Development Tools offer a wealth of benefits for automation testing, empowering testers to conduct comprehensive and efficient testing of web applications. These tools provide powerful features such as element inspection, debugging, performance profiling, and network monitoring, enabling testers to identify and resolve issues swiftly. With the ability to manipulate page elements, simulate user interactions, and analyze network traffic, browser Development Tools streamline the automation testing process and enhance test coverage. Additionally, they facilitate collaboration among developers and testers by providing insights into application behavior and aiding in bug diagnosis. By leveraging browser Development Tools for automation testing, organizations can achieve faster release cycles, improve software quality, and deliver a seamless user experience across different browsers and devices. Embracing these tools is essential for modern software development teams seeking to ensure the reliability and performance of their web applications in today's dynamic digital landscape.