Marie Cruz
Marie is a software tester and also a tech blogger at testingwithmarie.com where she talks about testing and test automation in general. Currently, she works as a Developer Advocate for k6.io
Visual Testing with Cypress and Applitools
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?
Visual Testing with Cypress and Applitools
By Marie Cruz
Visual Testing with Cypress and Applitools
In this lunch and learn, we'll look at what visual testing is and how we can use Applitools to write visual tests together with Cypress.
