Skip to main content
26 February 2020

How to Avoid False Positives when Doing Visual Testing

The biggest pain point of full-page screenshot visual regression testing is 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 the Staging environment you could to 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?

We have come up with Content Fixtures. The main idea is that right before the screenshot is taken we inject javascript that alters the content of the site so you can substitute dynamic content with “lorem ipsum”.

 

Example of avoiding false positives

Original dynamic element

Content Fixtures Original Image
Original site with dynamic elements

We have applied title, paragraph, and image fixtures.

Content Fixtures Applied
Content Fixtures Applied

As you can see still after applying fixtures we have blocks slightly with different heights. That happens because the original images were of different heights. It makes sense to fine-tune this so if in the future articles will change and images will be different heights we won’t get changes because of that.

So we can apply fixtures and also apply custom CSS to make blocks the same height.

Content Fixtures Applied and CSS
Content Fixtures Applied and CSS

On Project's settings, things would look like this. Same old CSS selectors.

Project Settings Content Fixtures

 

Project Settings CSS

Stabilizing Elementor website for Visual Regression Testing

Elementor is a very popular WordPress Website builder.

It has an extensive library of blocks (widgets) that you can use on your website.

Regarding visual regression testing, because of the dynamic nature of the widgets, it can sometimes be tricky to avoid false positives. Every time you take a screenshot, it looks slightly different: the slider can be in a different position, the animation can be in a different state, counters, and others.

4 mins read read

A Comprehensive Guide to Non Functional Testing: Types, Examples, and Tools

Testing is an essential part of the software development lifecycle. Any software application needs to be tested for its functional and non functional requirements. Testing helps to examine if the software application matches all requirements and standards, ensuring customer satisfaction. Various aspects of applications are checked using different tests, classified into functional and non functional testing categories.

17 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs