7

If I do compare the screen shot with the real time application then it's getting failed. What would be best approach and how to compare the screen shot in Cypress

Output: getting error log on cypress for

enter image description here

installed dependency for comparing the screen shot

npm install --save-dev cypress-image-snapshot @types/cypress-image-snapshot


// code on commond.js file.
const compareSnapshotCommand = require('cypress-image-diff-js/dist/command')
compareSnapshotCommand();

 // code on cypress.config.json 
 const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
      getCompareSnapshotsPlugin(on, config)

// .js test scenario on test file 
describe('compare the homepage screen shot with the application homepage', () => {
    it('should compare the homepage', () => {
        cy.visit("/");
        cy.compareSnapshot('fixtures/healthcaresuccess-page.png', 0.001);
    }
Vinod Vishwakarma
  • 71
  • 5

1 Answers1

1

You will need to alter your image difference threshold. Right now it is set to 0.001. You'll need to either set a new base reference image or change the option to allow for more difference before failing the test.

In your <rootDir>/cypress/support/commands.js, you can alter the option

addMatchImageSnapshotCommand({
  // alter to your choosing
  failureThreshold: 0.05, // threshold for entire image
});
jjhelguero
  • 2,281
  • 5
  • 13