Skip to main content
9 October 2023

2 different ways to use Baseline in your visual regression testing process

While you can directly compare two websites with VRT there is a notion of a Baseline set that you always compare against. But why would you need one?

We see two main use cases:

  1. monitoring
  2. save time in pull request testing

 

Monitoring

Let's say you set up daily monitoring. This is when you compare your screenshots always with "yesterday's" version.

Imagine there was a bug introduced on a certain day. This means that only the next day's monitoring run will trigger the error. All subsequent ones won't.

Because of the nature of VRT you do get a tendency to get false positives here and there. So you can easily accidentally skip that day with an actual error and see that tests got green back again the next day.

baseline daily monitoring use case

This is where the Baseline would help.

Instead of comparing with yesterday's version, you could compare against the Baseline. So instead of just next-day error you would see all subsequent tests turn red and it will force you to check them out and approve the change (set a new baseline) or fix the bug.

 

Pull requests testing

Once you set up testing pull requests you would like to compare their screenshots with some particular environment (for example staging).

You create screenshots from staging every time you do screenshots from your pull request environment, but instead, you could reuse screenshots from the staging environment multiple times.

You can take them only when you actually deploy changes to the staging environment and assign them as your baseline. In your pull request pipeline you will be comparing your pull request screenshots with baseline instead.

 

How to set baseline screenshots in Diffy

You can set either whole set of screenshots or individual screenshots using drop down menu.

How to set baseline in Diffy

 

 

Visual Testing of Patternlab and Drupal

Because both Patternlab and Drupal 8 can use twig as a rendering engine it is possible to build a theme to be based on Patternlab’s components. It makes very easy to apply visual regression testing to Patternlab’s demo site.
6 mins read read

Testing tabs, mobile menu, sliders

A lot web pages right now have some elements that gets activated by clicking on the pages. For example, sliders, or dropdown menu, or tabs. How to take screenshots of those pages too?
4 mins read read

Make some pages for Visual Regression Testing only in Drupal

When you do visual regression testing, it can be a great idea to have some dedicated pages with all the different elements of your site combined. So instead of running screenshots of many pages on your site, you could do just a few and cover all the UI. These are also sometimes called style guides.

On the other hand, you do not want your site visitors to accidentally open these pages and be surprised by what they are for.

1 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs