Efficient Visual Layout Testing with Chrome DevTools

#qa #testing #tooling #beginners

A web tester, in addition to functional testing, faces various non-functional checks such as UI testing, usability testing, performance testing, etc. One important aspect of web interface testing is checking the layout of web pages. In this case, we not only check the appearance of the page, but also its compliance with the design, display of animations, and other aspects that may affect the user experience.

Of course, every tester is familiar with developer tools and applies them in their work. However, not everyone knows that developer tools can provide additional features that can significantly simplify testing. In this article, we will focus on Chrome developer tools and explore some handy tricks that will help you easily check the layout and obtain more accurate results.

Colors testing

How can we verify if the colors on a web page match the style guide? How can we identify colors that don't respect to the design? Of course, you can rely on your eyes, you can inspect each element and look at its CSS properties, but there is an easier way to discover all the colors used on the page - the CSS Overview panel. This is a new feature still in preview mode, which allows you to test it as a user and provide feedback.

You can access the panel in two ways:

Through the kebab menu (Customize and control DevTools) → More tools → Css overview
Through the Command menu → Show CSS Overview

In addition to other information, the panel provides data on all the colours on the page. The colors are grouped by type (background, text color, border color, etc.). Clicking on any color reveals a list of elements where it is used. Hovering over an element from the list highlights it on the page. There is also information about low-contrast combinations, which is important for accessibility testing.

When inspecting individual elements, we can see that the color is represented in different formats - HEX, RGB, HSL. To quickly obtain the desired format for verification, hold down the Shift key and click on the color icon. As a result, you will get a list of color representations in different formats - quickly and easily without additional clicks to open the color panel.

Fonts testing

Another challenge during web pages testing is how to make sure that all fonts match the design? The easiest way to accomplish this is to use CSS Overview panel once again. This panel also provides information about all the fonts used on the page. This makes it easy to identify fonts that doesn’t adhere to the style guide, determine which elements are using, and create bug reports based on this information. The functionality is the same - by clicking on the font, we get the elements with it, and by hovering over the element, the corresponding element is highlighted on the page.

Pop-ups testing

One of the common problems in visual testing is how to test pop-up elements that are dynamically rendered on the page. Especially if there is a bug in them and you need to document it by attaching a screenshot. There are two methods to freeze such elements for testing. The first method involves using a special debugger on the parent element.

If you find it difficult to determine exactly where in the tree the element appears, you can set a breakpoint on the modification of the entire

. This way, when the pop-up elements are triggered, the execution of scripts responsible for their rendering will be paused, allowing you to step through until the desired element appears on the page. However, this method can be complex for testers due to the challenges of determining the parent element and the unpredictability of the number of debug steps required to achieve the desired result.

The second method is to set a debugger after a certain amount of time, during which you need to call the pop-up window. Simply type the following command in the console:

 setTimeout('debugger', 5000)

press Enter, manage to call the pop-up element within 5 seconds (5000ms) and test it calmly. I personally prefer this method, as it is faster and more convenient.

Please note that this method may not work on native popup elements such as date pickers and dropdowns. Beginners may sometimes have doubts about how to recognize native browser elements and why they are not visible in the regular DOM. To ensure that you see the native element you can go to Settings → Preferences → Show user agent shadow DOM. This will enable you to see and inspect such elements.

What is important for tester in terms of user agent shadow DOM? It's essential to understand that the behavior and appearance of the User Agent Shadow DOM elements are controlled by the browser vendor. While developers can modify the styles of user agent shadow DOM elements to some extent using CSS, it is important to note that any changes made may have unpredictable effects and may not be supported across different browsers. So in most cases testers should not report bugs or issues related to the encapsulated styles or behavior of these elements to their development team, as they have limited control over them.

Animations Testing

When testing layouts, we occasionally come across animations. How can we ensure that animations play correctly according to the design? TDeveloper tools offer a specialized tool for debugging animations. The most convenient feature for a tester here is the ability to slow down animations, allowing careful observation of their progress to catch any bugs. Additionally, it's possible to pause an animation to report any issues encountered.

Responsiveness Testing

As you may have noticed CSS Overview contains more than just fonts and colors information. Another essential piece of data that testers can obtain from this panel is the list of media queries. What is the media query and why it’s important knowledge for tester? A media query is a CSS rule that allows you to control the styles of elements based on the values of technical device parameters, such as viewport width which is fundamental measurement for responsiveness testing.

From here, we can get the boundary values of viewports that need to be included in responsiveness testing. By applying test design techniques such as equivalence classes and boundary values to screen width values in media queries, the number of devices required for checking layout responsiveness can be reduced.

The same information is also available during device emulation. In additional settings in emulation mode, you can enable the 'Show media queries' option. This will display a panel showing the boundaries of screen widths for which specific styles are applied.

Bonus! Useful Chrome extension for Responsiveness Testing

Dynamic content testing

Sometimes, while testing, there is a need to check the layout with different text to ensure that elements dynamically change based on the content or that the layout remains stable on mobile devices. We can prepare proper test data for this, or we can simply find the necessary element in the DOM tree using the inspector and replace the text within it. However, if there are multiple elements requiring changes, it is more expedient to switch to design mode. To do this, type the following command in the console:

document.designMode = 'on'

Once activated, any text on the page can be directly edited.

Screenshots for Testing Reports

No layout testing report would be complete without screenshots. Of course, you can use some extensions or separate programs, but in Chrome developer tools there is a ready-made functionality for all types of screenshots. You can capture the visible area of the browser window, take full-screen screenshots, select a specific area, or even capture individual elements. To access this feature, open the command menu, start typing “screenshot” and select the desired item from the list.

Additionally, there is an alternative method for capturing screenshots of elements. Right-click on the node you want to capture and select the corresponding menu item. Save the screenshot and attach it to your bug report. It's quick and easy!

Conclusion

One of the most valuable soft skills of a tester is curiosity. Apply it to everything you encounter in your work. Open up DevTools and explore its features, try out different functionalities, and familiarize yourself with the available commands. Dive into the settings and customize DevTools to suit your daily tasks. Learn keyboard shortcuts to speed up your work. Don't overlook articles about Chrome updates. You may not understand everything mentioned in those articles, but there's a good chance you'll find something useful and convenient for your work purposes.