Visual Testing with Cypress and Applitools

Marie Drake

Principal Test Automation Engineer @ News UK

mariedrake.com @mcruzdrake

Cypress lunch and learn recap

Great tool for testing front end/UI
...but also for testing APIs!

Cypress Introduction

C ypress API testing

Cypress, among other things, validates the structure of your DOM.

(what about the look and styling of your app?)

Visual testing 👀

We need to validate what the user sees.
We need to verify our application on different browsers/viewports/mobile devices
Can be time consuming when done manually

Visual testing (manually)

source: http://www.puzzlesandriddles.com/SpotTheDifference14.html

Visual Testing (automated)

It's not new!
A lot of existing visual tools already (pixel by pixel comparison)

if(isBaselineFound) {
  runSnapshot();
  checkDifferences();
  reportTestStatus();
} else {
  promoteImageAsBaseline();
}

Problem: Flaky tests

Problem: Dynamic data

Problem: Cross browser visual validation

Production Visual Bugs

How can we solve this visual testing issues?

Visual testing with

What?

Applitools is a cross browser visual testing, founded on 2013, which uses AI to compare images like a human would.

Integrates with almost all functional testing framework including native apps.

How?

// initiates the eyes SDK
cy.eyesOpen({
  appName: 'ReactSplash',
  browser: { width: 1024, height: 768 },
});


// takes a DOM snapshot
cy.eyesCheckWindow(); 


// closes the eyes SDK
cy.eyesClose();

How it works

source: https://applitools.com/tutorials/cypress.html

Let's explore Applitools!

https://github.com/mdcruz/react-sample-apps/tree/master/image-search

Additional Resources

Any questions?

mcruzdrake