Chrome is the most popular web browser in the world, with almost two-thirds of users preferring it to other browsers 🌎 Apart from being the most used browser, it’s a great aid for us, testers. If you work on web testing, you probably use multiple browsers for cross-browser checks. But you can do more than just execute the app in the browser. You can use Chrome Developer Tools to get more information about your app’s behavior or even change its behavior. Let’s discuss how 🤨
Table of Contents
- Accessing Developer Tools
- Elements tab
- Monitoring HTTP requests from the Network tab
- Simulating network performance using Developer Tools
- Emulating devices
- Working with Cookies
- Capturing screenshots from Chrome Developer Tools
- Help with localization testing
The Developer Tools is a pane that opens in the Chrome window and gives you various information about the current tab. To open it, you can either go to the Customize and Control Google Chrome menu (aka the kebab menu) and click on More Tools -> Developer Tools, you can press the Ctrl+Shift+I shortcut, or press the F12 key. This will dock the DevTools pane to the open tab, and you can choose where to place it or have it open as a separate window.
This tab allows you to inspect information about the web elements, through the DOM and CSS styling. It is particularly helpful for web automation testing because it can help identify the best locators for the web elements.
You can obtain the XPath or the CSS selector of an element from the DevTools, by right-clicking the element in the Elements tab and selecting Copy -> Copy XPath or Copy -> Copy Selector. You can also use the search function (Ctrl+F) to look for specific elements in the DOM. The search applies not only to plain text but also allows you to filter even by complex CSS selectors or XPath, while at the same time displaying the number of matches. This can be helpful verify that the locator identifies the correct elements and also to see the number of elements that match a specific locator:
The Network tab of the Developer Tools shows information about all HTTP calls. Here, you can see the headers, the request body, the response code and body, and even the response time. You can inspect them to test that the client sends the correct calls, and the server returns the correct response.
The request URL and body can be even copied to be used for later API testing, using tools such as Postman. You can also see if there are unnecessary calls that are sent when a page is being loaded, or, if the page is slow, to identify which calls are impacting the performance.
To work this in the Network tab, make sure you first click the Record button. Then execute the steps inside your application. The Network tab will display all the calls sent:
You can click on each request to see its details:
- the request URL
- the request and response headers
- the request method and response code
- the request and the response body
At the bottom of the tab you can also view the number of requests sent, the amount of data sent, and the load time.
The Waterfall column offers a visual representation of the stages of the requests, i.e. how much time each request took, and at what time it was sent and completed. This can give you a good idea of which calls are parallelized and which are not, which can be helpful in identifying performance issues.
You can use the Performance tab to monitor how long each event takes. Here, start recording, then perform the actions you want to monitor, and stop recording when you finish the tests. By default, the Screenshots checkbox is enabled. This means that you will get a screen capture of every recorded frame. From here, you can select parts of the recording to see details about them:
But what’s even cooler is that you can simulate various network connections, to see how the web app you are testing behaves under different circumstances. By default, the browser will use your machine settings, so your network and CPU settings. However, you can choose to simulate a slower Internet connection, a slower CPU, or even no Internet connection. This can be particularly helpful in understanding how the application works in real-life conditions.
Not as good as testing on a real device, or even on other emulators/simulators, this can be the next best thing. While it will not simulate normal mobile functioning conditions, you can test the application’s look and feel on various displays. To do this, go to Settings (or press F1 while in Developer Tools) -> Devices:
Here you can see a list of default devices provided by the Google team. You can check the checkboxes corresponding to the devices you will want to use in your tests. You can also add your own device, with custom configuration (e.g. specific resolution, use/don’t use touch).
To enable the device emulation, click the Device Toggle Toolbar icon:
This will change the display to reflect the selected device. You can switch before the devices selected before, from the Settings menu Here you can also select network settings (including no Internet) or display orientation. If the device has touch enabled, Chrome will also simulate it.
In web apps, cookies are pieces of information stored on a local machine, containing identification data to be sent to the server, so the application will display personalized content. They are used to make the pages load faster, and also to store important information, such as the content of a shopping cart.
We can (and should) test web applications with various Cookies settings, that might reflect real-life use.
The most important details about a cookie are:
- its name
- its value
- its expiration date
And the good thing is we can see all this information in Chrome DevTools, in the Applications tab. Here, on the left menu, you can expand the Cookies node and see the application list. Selecting a website will open the cookies that are stored for it, with detailed information about it. You can delete cookies from here, or edit their values and see how the application behaves after the changes:
Developer Tools also lets you grab screenshots of the website/web application. If you press Ctrl+Shitft+P inside the DevTools, and filter by “screenshot”, you will get 4 options:
- Capture area screenshot – allows you to select which area of the page to save (similar to Windows’ Snipping Tools)
- Capture full size screenshot – will create an image copy of the entire page, including the parts that are not in view
- Capture node screenshot – creates a screenshot of the highlighted element, in the Elements tab
- Capture screenshot – will capture a screenshot of the part of the page that is currently in view
All these options will download a .png file with the screenshot.
If your application is localized and you want to make sure that it works well in different countries and languages, you can change your browser’s locale. To do this, open the Customize and control DevTools (the kebab menu next to the Settings), click More Tools, then Sensors:
This will load the list of available locations, which have the geo-locations selected, the locales, and the timezone. You can also create your custom locations (by pressing the Manage button and filling in all the information for the desired location).
Web testing can be very complex, and even if you are only performing manual testing, you can still use various tools to help you. An important feature that should not be underestimated is the Developer Tools from Google Chrome. This article covers some of the most important tools we can use as testers with what’s provided by default by Google, without installing extensions or other third-party apps.