Multiple base images

If you run your tests on different machines or browsers, you possibly noticed that every device/browser creates slightly different screenshots.

The recommended approach for this problem is to use Docker or a similar virtualization tool to create an identical system for each test. But this takes a lot of time.

The more common solution is, to increase tolerance to "mask" those differences. But this can also result in unwanted differences staying unnoticed.

The solution? Match against multiple base images!

How it works

First, you need to create one base image for every device/browser/pixel-variation that you encounter.

The magic key is the filename: To create a new variation of a base image, insert the suffix ~<ID> right before the .png extension. The <ID> can be any valid filename-string (except the character ~)

Comparison

An actual image is always compared to all available variations of the base image. Only the best match is used for the final assertion or as the return value.

Sample

/*
Assume that you have the following images:

screenshots/base/google-home.png
screenshots/base/google-home~1.png
screenshots/base/google-home~chrome.png
screenshots/base/google-home~mac-safari.png
*/

// Captures a new screenshot and compare it against all above images.
await I.checkVisualDifferences('google-home', {captureActual: true});

// If at least one image is within the tolerance, the test passes.

Notes

• All base image variations must come in the same dimensions as the actual screenshot

• Currently, you need to manually rename the base images to include the ~<ID> part. The takeScreenshot() method can only create an image without the variation-part in the filename.

---

← Using Folders | Notes and FAQ →