将现有屏幕截图与赛普拉斯中的实时应用程序进行比较时出现错误

Question

如果我确实将屏幕截图与实时应用程序进行比较，那么它就会失败。最好的方法是什么以及如何比较 Cypress 中的屏幕截图

输出：在 cypress 上获取错误日志

用于比较屏幕截图的已安装依赖项

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);
    }

Answer 1

您将需要更改图像差异阈值。现在它设置为 0.001。在测试失败之前，您需要设置新的基本参考图像或更改选项以允许更多差异。

在您的中<rootDir>/cypress/support/commands.js，您可以更改选项

addMatchImageSnapshotCommand({
  // alter to your choosing
  failureThreshold: 0.05, // threshold for entire image
});