Have you ever heard of the Babel Image Archive? It contains randomized fields of pixels that can potentially cluster into any visualization imaginable. With 4096266240 unique images currently present in the algorithm and constantly multiplying, the Canvas of Babel can generate any image that could ever exist.
A common aspect between the above and UI is the (near) infinite number of configurations. Think of the number of smartphones, tablets, desktops, and other electronic devices available now and those that will be. Add to that the amount of screen resolutions, browsers, and OSs. For a QA engineer, providing software testing services for each can take a lifetime. However, there are solutions to ease QA experts’ work. But first, let us go over the core aspects of visual testing.
Why Visual Testing Is Crucial
It is obvious that we enjoy the beauty. However, in UI, it is a bit more complicated than ‘people like pretty things.’ Software visuals are about functionality and brand image. Specific benefits of thought-out GUI include:
- Stimulating legibility. Introducing the user to a favorable setting persuades them to stay on the app longer since they can explore effortlessly.
- Constructing visual balance. Visual elements’ positioning and alignment create a logical and pleasant environment. In turn, the user can navigate the app easily and profit from all functions.
- Shifting the focus to particular elements. Directing users’ attention to where it should increase the possibility of consideration and action. For example, smart placement of notices, useful links, propositions, etc.
- Guiding towards action. Related to the above, a non-invasive approach to presenting CTAs advances the chances of user action.
- Enhancing credibility and trust. Good and tested UI demonstrates to the users that much work was put into accommodating their needs. While it is true not everyone will recognize this, the aftermath is tied to the psychological impact. For example, UI that is messy and impedes accessing certain app functions weakens consumers’ desire to continue using a program/website. And if they cannot figure out what is what or use the app as intended, they will seek out alternatives.
- Strengthening brand image. Charming design can make a brand recognizable. However, true beauty is more than skin-deep. Without actual logic and functionality behind pretty visuals, the UI is not worth much. QA specialists verify that everything works as intended. Thus, the users can enjoy the app to the fullest.
QA engineers are vital actors in ensuring that an app coincides with the intended UI, thus realizing the vision of the designers and project managers. But it is only one of the advantages of visual testing. When making sure that a program does not break the string of quality from back- to front-end development, UI testing acts as the bonding agent. It is that final touch where everything comes together to create a truly exceptional outcome.
What Visual Testing Involves
During UI testing, QA specialists need to verify whether the software user interface turns up appropriately for all consumers and corresponds to the initial design. In practice, it is checking various elements’ appearance, specifically:
- How they integrate with distinct browsers and devices.
- How they look for different screen sizes.
- How they behave on individual operating systems, etc.
Similarly, while testing, many details must be reviewed, for instance:
- Elements’ alignment.
- Images’ location and quality.
- Font correspondence.
- Icons/widgets’ positioning.
- Validation messages appropriateness/readability.
- Buttons/links’ visibility, and many more.
Essentially, the procedure of reviewing visual compliance is a long game of ‘find the difference between these pictures.’ For example, browser snapshots are examined and compared to the initial version, i.e., the intended design. When there is a difference between the two, the test will be considered ‘failed.’ These discrepancies can be caused by bugs in the code or subsequent UI alterations. Hence, upon noticing such issues, the code or the baseline image must be updated, and tests rerun.
Defining Pixel Perfection
A subdivision of visual testing is pixel perfect testing. Pixel perfect design presupposes a layout that prioritizes sharpness and fidelity. Where sharpness is how clear and defined a visual element is, and fidelity is the degree of details and functionality.
For illustrative purposes, let us take a look at the following images.
Source: https://dcurt.is/
Click an image to view at full size
Upon the first viewing, one may consider the logo completely normal. And they would not be wrong. The picture is clean, readable, and has no defects. Now, what about the next version:
Source: https://dcurt.is/
Click an image to view at full size
Same qualities apply to this option as well. And yet, what really stands out is the refinement of the edges. The pixels are perfectly aligned and seem to almost glow.
Source: https://dcurt.is/
Click an image to view at full size
The difference is subtle, but it makes an impressive impact on the viewer. For this, pixel fitting is used to ‘shave off’ blurred pixels (which usually occurs when resizing) and round them up to the closest whole pixel.
Source: https://dcurt.is/
Click an image to view at full size
After observing the second alternative, the original logo looks almost wrong.
From here, we can determine that pixel perfect testing is defined by the precision dedicated to the assessment of the designs. Therefore, pixel perfect testing verifies the principles of pixel perfect design in regard to every pixel.
Attaining Pixel Perfection
Is pixel perfect achievable? In essence, – yes. However, this short answer defines possibility but not reality. Not many project managers are ready to sacrifice that much time on product development. And, frankly, not every QA engineer is prepared to invest that much time into testing every 0.26 mm (1⁄96 inch) of every screen.
Still, there are PMs who want their apps/programs to be identical to the provided designs, i.e., pixel perfect. One cannot say that such ‘devotion’ has a negative connotation. It does require much more work from developers and QA professionals, but it should never be perceived as an inconvenience.
Designers spend a lot of time creating their art. Not to just make it look flawless but also to provide end users with the most friendly and functional environments. From determining the size of main buttons to coming up with layouts that are most intuitive. Thus, developers and QA experts should do as much as possible to support the artists’ work. Yet, designers should also understand that it is not that easy for back- and front-end devs.
There is always a middle ground to avoid a zero-sum game. Commonly, it involves making some versions of the app pixel perfect, e.g., for most popular devices/browsers/OSs. And the alternatives, e.g., older apparatus or rare operating systems, will still receive good and functional designs, pixel-close-enough, so to speak. Small deviations from the original are seldom visible to the naked eye. As a result, everybody can enjoy the benefits of smart work:
- Developers do not have to spend too much time rectifying visual issues.
- QA agents do not have to squint at each pixel.
- Designers have their labor made visible.
- Project managers have their product made appealing and operational.
- End users enjoy the app’s UI.
Although, it is one of many possible options. If pixel perfection is one of the requirements a QA engineer receives, better consider it an opportunity to prove their skills. Plus, they can always rely on visual testing tools to share this pixel perfect burden.
Visual Testing Tools
QA engineers use UI testing tools to speed up and ease the testing process. It is possible to find ideal options for automated and manual software testing for any project. Below, you can find a brief overview of some apps that we consider useful.
Tool Comparison
Click an image to view at full size
Avocode
Official site: avocode.com
Closely resembling Figma, Avocode is a tool for working with design files. The app has a convenient interface, with the biggest advantage being the Pixel Checker feature. It allows overlying designs on top of the webpage open in a browser for pixel perfect testing. Avocode also offers plugins that can be used to import designs from other platforms. Thus, there is no need for copying/downloading files one by one if the project uses, for example, Figma for design management.
The designs in Avocode look like this:
Screenshot: Avocode
Click an image to view at full size
Pixel Checker particularly functions by ‘sandwiching’ screenshots, adjusting the opacity to convenient levels, and checking the alignments of desired elements. You can find a short video guideline on the tool’s official website.
Screenshot: Avocode
Click an image to view at full size
The only downside of Avocode is that it doesn’t have a free version.
PerfectPixel Plugin
Chrome Web Store page: PerfectPixel
This is a free plugin for Chrome that is very easy to use. It functions similarly to Advocode. You can regulate screenshot opacity, adjust and scale an overlay position, and modify margins for pixel perfect testing.
A downside of the app is the absence of the ability to import design files into it. Thus, you need to make screenshots and adjust them to the screen resolution. Still, it is a simple and useful tool with the capacity to check every pixel.
Screenshot: PerfectPixel Plugin
Click an image to view at full size
LambdaTest
Official site: lambdatest.com
A great tool that can run autotests and even help with project creation. It also allows you to remotely open different browsers/mobile emulators and run manual tests on them. That is, if there is no access to, for instance, Safari, you can load Safari within the app and run tests there.
Another valuable feature is UI Comparison. While not automated, it allows gathering initial designs and drawing comparisons for each. You can start the analysis for all selected contrasting processes, and the app will present results on dissimilarities via a convenient report.
The window with all images looks like this:
Screenshot: LambdaTest
Click an image to view at full size
You can display the results like this:
Screenshot: LambdaTest
Click an image to view at full size
Or you can view them using a slider:
Screenshot: LambdaTest
Click an image to view at full size
There is also the ability to debug issues in live testing and integrate LambdaTest with other tools to simplify managing bugs and tasks.
Applitools
Official site: applitools.com
This tool can be integrated into automation. It is a framework you need to add to the project. Then, you can make a screenshot at any moment by running the following command: eyes.check(Target.window().fully().withName("Main page"));.
You can capture the entire page or just the selected section(s). The screens will be sent to the web app, where the program will assess the elements and highlight any inaccuracies. Additionally, specifying the areas with dynamic parts of the site lets the tool know these sections can be omitted.
Below, you can see how the test result looks in the app. We compared five sections in it:
Screenshot: Applitools
Click an image to view at full size
And here are the results for the section where the tool detected the differences (the tool only highlights the area with pink; the arrow and red frame were added by our QA engineer):
Screenshot: Applitools
Click an image to view at full size
One of the main vices is the inability to add the original design and compare the rest with it. You can set the baseline image before the first test run and compare the rest of the visuals against it. You can later replace this image, but only after completing the test.
Among the merits is the ease of use, since it is enough to add the mentioned command in the right place and adjust the settings before running the tests. The neuron net will take care of comparisons itself. Users can run tests on different screen extensions simultaneously. One more advantage is integration with Appium. Also, the tool comes with detailed and helpful guidelines.
Galen Framework
Official site: galenframework.com
It is a framework for very detailed validation of any element on a page. It uses special files that describe the elements you need to check.
Here is an example of the spec file:
Screenshot: Galen Framework
Click an image to view at full size
After the test run, an HTML report is generated:
Screenshot: Galen Framework
Click an image to view at full size
A page with a test result looks like this:
Screenshot: Galen Framework
Click an image to view at full size
Upon clicking on any element checking clause, a screenshot with the marked components that do not match is provided. Thus, convenient and fast assessment of visuals is available.
Below, you can see an example of a result of the test that has detected a mistake. The distance between the elements is -1 pixel instead of the intended 0 to 5 pixels.
Screenshot: Galen Framework
Click an image to view at full size
Galen can be installed on a PC and tests run without writing code at all. It can be done only by using Galen specs.
Screenshot: Galen Framework
Click an image to view at full size
Another interesting feature of the framework is that spec files are not tied to programming languages in any way. Meaning that having created a file once, it can be used with Java and JavaScript. Moreover, it can generate spec files using json.dumps() from the web pages.
Unfortunately, the last release was in 2018, and it is not known if it will ever be updated. Still, this tool has great potential and with its current available functions is quite useful.
To Conclude
85% of human perception is mediated through vision. Nevertheless, when it comes to UI, making a design look good is simply not enough. Therefore, to create a top-quality product, teams need to run visual testing – to find the balance between pretty and practical.
Pixel perfect testing and design, while will give a program a leading edge, do not account for top functionality. Using visual testing tools smartly, however, could provide for an app that is not ideal but exceptional still. Explore today’s tech world, gather the courage to try new options, and find that pixel-almost-perfect solution.