Visual testing with Cypress using Applitools Eyes

Let’s integrate Applitools Eyes with Cypress..

I hope you know what automated visual testing is by now.. If not, head over here and read this story I have written before :)

Visual Testing & Tools

Now let’s get back to the topic.. First let’s take a look at the features in Applitools eyes. You are gonna love this! ❤

Introduction to Applitools Eyes features

Setting Baseline images

When you run your visual tests for the first time you need to check the snapshots taken. If those snapshots are the expected visual look & feel you can set them as the Baseline images.

• To accept a snapshot as a baseline image you have to click on the thumbs-up button near the snapshot.
• To reject a snapshot as baseline image you have to click the thumbs-downbutton.
• Once you are done with accepting/rejecting images, you must click the save button to store those changes you did.

Comparison Mode

Applitools give user few modes to compare the snapshots with the baseline images.

• Strict region — comparison will look for a perfect match with each pixel of the snapshot
• Layout region — comparison will check only for the layout of the snapshot. Here the content (text, images etc) could be different on basline & snapshot but if the layout is same, the comparison will pass.
• Ignore region — comparison will be ignored for this region/component
• Floating region — comparison will allow mentioned components to be in a specific boundary region
• Content region — comparison with evaluate on content match level for the region

Accessibility testing