Home / Visual Comparison Tests – What is it and what is it good for?

Visual Comparison Tests – What is it and what is it good for?

As we work almost exclusively with WordPress, the websites often consist of a concoction of ready-made third-party solutions. This often means that it is very difficult to know if something is wrong when introducing changes, no matter how small the updates are. For functions, it is possible to perform automated function tests with, for example, Selenium & Device tests. However, it is very time consuming (ie expensive) and does not work to ensure what is often very annoying for our customers – those little things. It has previously been very difficult to be spot on in deliveries, and if you change person, it is very difficult to transfer knowledge from one person to another. Furthermore, the quality of the work has mainly been based on feelings and premonitions rather than solid knowledge, which has meant that it has sometimes gone very well and sometimes not at all as well.

Visualizes differences

Visualiserar skillnader

The theory behind visual comparison tests is simple; In the environment that is open to the outside (the production environment), things look as they should, but when we introduce changes – an update or a new function – we do not really know if there will be regression errors in other places, that is, things that “should” work, breaks. We, therefore, take a copy of the production environment database in a separate environment, but with the changes, we want to introduce.

From there, we let the tool do its job. The tool enters the test page and goes through page by page while doing the same thing in the Production Environment. When this is done, it presents a result. This result is a calculation where it has made a visual comparison of the two environments and highlights the difference.

Utvecklingsmiljöer

The result shows the resolution it has tested in (we test in 5 different resolutions), and presents exactly how much the pages differ. For this example, we have not synced the databases, which means that the example shows that the only difference is that there are different records in the “Recent records” column on the right.

What problems does this solve?

The problems that are solved are many. To name the foremost;

  • Shows whether the visual impression of something changes in different resolutions
  • Shows if permalinks and page structures still work
  • Calculates and highlights deviations rather than trusting that the person has time to spend hours examining the page in detail
  • Provides greater security as more pages can be crawled at a very high speed

The current tool is built on the basis of Wraith, but to reach our goal picture where we have automated the main part of the tool and where the tool fits nicely with all of our processes, we realize that we must do a total rework. But; Until then, we have this awesome tool that helps us and our customers feel safe when installing and updating.