Blog

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?

 

Here is an example how you can do that with Diffy.

 

Let's take an example of the site https://www.nestle.com/. We would like to take screenshots of not only homepage, but also the language switcher and second slide on the homepage slideshow.

 

For that we can create three URLs from the homepage:

The biggest pain point of fulll-page screenshot visual regression testing are false positives. They usually happen because of the dynamic nature of the content.

There are few ways of handling this situation.

First, you could mask or remove dynamic elements completely. But then you’ll miss testing them.

Another option, if you are comparing your Production with Staging environment you could sync the content so those dynamic elements are the same.

But what if you take screenshots from Production regularly and editors do change content over time?

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.