cypress-image-snapshot VS BackstopJS

The cypress-image-snapshot module introduces the matchImageSnapshot() Cypress command which can take a screenshot of the entire screen or of the chained element.

Cypress Image Snapshot

Ive used backstopjs for this in the past https://github.com/garris/BackstopJS

There are different tools for visual screenshot testing, like BackstopJS, and Cypress.io also has a screenshot() function. In this series, I focus on writing tests with CodeceptJS.

I’ve been using BackstopJS for doing the regression testing, which is very useful and provides a nice report showing differences if it finds any. Recently I’ve been looking at Cypress for my other types of tests, and realized it also supports visual regression testing, though there isn’t a nice report that it outputs. Setting it up in Cypress is pretty easy though.

I would look into visual regression testing instead of programmatically checking for the presence of UI elements if possible. Basically , you take screenshots of all your web pages pre and post deployment. The selected tool then compares the screenshots and shows the pixel differences. I have used backstop js in the past: https://github.com/garris/BackstopJS but am not sure what tool is more used nowadays. After a quick Google search, I had a difficult time trying to find a free tool. Since you are using Cypress, I found an article where someone was able to use the snapshot plugin to create a visual regression test suite: https://www.toptal.com/web-qa/ui-visual-regression-testing . Sorry for lack of formatting. I am on mobile and this is the best I can do right now. Hope this helps.

Popular libraries such as BackstopJS for Puppeteer, or Loki provides developers and QA with powerful techniques to quickly, and easily, set up visual regression testing.

Backstop.js is very useful for this. Provides good tools for viewing the visual diffs. Also possible to automate in a CI environment.

https://github.com/garris/BackstopJS

BackstopJS is a framework that automates visual regression testing. This framework is written in JS and consists of the following tools:Puppeteer(headless chrome)+ ResembleJS(diff library). It uses a headless Chrome, in that way it's not actually opening up our Chrome browser and it's not taking screenshots that we can see. All we have to do is, write a script for simulating user scenarios and run backstopJS commands and it goes through and simulates user flows with headless chrome automatically. All we have to do is, run a simple command in the command-line tool so that it will take care of all the work for us.