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, 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) {
  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 

Let's explore Applitools!

Additional Resources

Any questions?