Skip to main content
26 February 2020

Less False Positives with Content Fixtures

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?

We have come up with Content Fixtures. Main idea is that right before 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 height. That happens because original images were different height. It makes sense to fine tune this so if in the future articles will change and images will be different height 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