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.
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:
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.
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:
Similarly, while testing, many details must be reviewed, for instance:
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.
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.
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:
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.
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.
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.
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:
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.
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.
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:
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.
The only downside of Avocode is that it doesn’t have a free version.
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.
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:
You can display the results like this:
Or you can view them using a slider:
There is also the ability to debug issues in live testing and integrate LambdaTest with other tools to simplify managing bugs and tasks.
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:
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):
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.
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:
After the test run, an HTML report is generated:
A page with a test result looks like this:
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.
Galen can be installed on a PC and tests run without writing code at all. It can be done only by using Galen specs.
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.
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.
The saturated mobile app market makes businesses constantly reimagine the definition of quality. This never-ending…
Over half of the software companies use test automation. And almost all testing pros rely…
Imagine studying a language without dictionaries or manuals. Could you learn what each word means…
For QA engineers, learning is a never-ending journey. While you can always expand and refresh…
Everyone can write decent functional test cases. Writing documentation for functional testing services that have…
Automation is now a priority. Nearly all QA specialists write automation scripts for their projects.…
