Visual Testing with Cypress and Applitools

Marie Drake

Principal Test Automation Engineer @ News UK         @mcruzdrake


Cypress lunch and learn recap

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

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)

Visual Testing (automated)

  • It's not new! 
  • A lot of existing visual tools already (pixel by pixel comparison)
if(isBaselineFound) {
} else {

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 


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.



// initiates the eyes SDK
  appName: 'ReactSplash',
  browser: { width: 1024, height: 768 },

// takes a DOM snapshot

// closes the eyes SDK

How it works 

Let's explore Applitools!

Additional Resources

Any questions?

Made with