Визуальная регрессия в Cypress

Я делаю визуальную регрессию:

код: плагины/индексы

       on('task', {
    graphicsMatch: ({ img1Path, img2Path, diffImgPath }) => {
      const img1 = PNG.sync.read(fs.readFileSync(img1Path));
      const img2 = PNG.sync.read(fs.readFileSync(img2Path));
      const { width, height } = img1;
      const diff = new PNG({ width, height });

      let pixelCount = pixelmatch(img1.data, img2.data, diff.data);

      fs.writeFileSync(diffImgPath, PNG.sync.write(diff));
      return pixelCount;
    },
  });

шаг определения:

          And('I capture the screenshot of {string}', (editorDocument: string) => {
  cy.wait(5000);
  cy.captureScreen(editorDocument).as('generatedFileName');
});

Then(
  'the generated pdf is as expected {string} and {string}',
  (nameOfFeatureFile: string, editorScreenshot: string) => {
    filesApi.comparePixelDiff(
      nameOfFeatureFile,
      editorScreenshot,
      Cypress.currentTest.title,
    );
  },
);

API:

          comparePixelDiff(
    nameOfFeaturefile: string,
    actualFileName: string,
    expectedFileName: string,
  ) {
    cy.get('@generatedFileName').then((receivedFileName) => {
      const sourceFilePath = `${FilesApi.screesnShotsFolder}${FilesApi.visualTestingFeaturesFolder}/${nameOfFeaturefile}/${actualFileName}${FilesApi.graphicExt}`;
      const expectedFilePath = `${FilesApi.expectedExportsFolder}${expectedFileName}${FilesApi.graphicExt}`;
      const diffFilePath = `${FilesApi.actualExportsFolder}${actualFileName}-${FilesApi.graphicsDiffSufix}${FilesApi.graphicExt}`;

      cy.task('graphicsMatch', {
        img1Path: sourceFilePath,
        img2Path: expectedFilePath,
        diffImgPath: diffFilePath,
      }).then((pixelsDiff) => {});
    });
  }
}

здесь я использую pixelmatch, я использовал область просмотра как 1280x720 в файле json локально, он работает нормально, но не работает в CI, так как разрешение снимка экрана не является постоянным

я даже пробовал cy.viewport(1280, 720) перед захватом экрана, он тоже не работал.

Как решить эту проблему, помогите.

0 ответов

Другие вопросы по тегам