Visual Testing — Cypress + Percy
In today’s world, Web design and development is changing at a rapid pace💨 and to make sure every single pixel is properly tested🧪 against design is going to be challenging and time consuming⌚ process.
Having a look at various testing methodologies, Visual Testing really stood out to address this issue.
Recently I liked Cypress a lot for UI testing, so when having a look at multiple tools that would support Visual Testing, I found Percy💜 that integrates well with Cypress. Percy has ton of features out of box.
So now that I had finalized the tool, its time to try out Percy.
Percy was too easy to install, Just an npm command
npm install @percy/cypress
Once executed, you are all set to integrate Percy to your existing tests, which is the best part since you do not need to write a new set of tests to do visual testing🖼️.
Just add cy.percySnapshot() where ever in the test flow you feel you require visual comparison. More detailed options are available in Percy official documentation📚.
Most of the websites today are dynamic, which means the website content keeps changing from day-to-day and Percy recommends the below approaches:
Some of the real time examples where this could be really helpful could be:
Fake — Loan Balance for a banking application
Freeze — Date and Time for a social media application
Hide — UI animations for a travel application
Percy also comes with power integrations⛈️ to make things easier for you.
Github — PR checks could you enabled to make sure visual changes are caught before merging to staging or production environments.
Slack — Instant notifications of visual passes or failures can be pushed to any preferred channels.
Percy also does screen comparison on different browsers and screen sizes.
This is one of the best features since it reduces the manual effort required to test across various browsers🌐 and mobile devices📱.
With so many advantages, Percy is an excellent choice💜 for Visual Testing.
