From dabbcc0844d275af5535e0e48dbace2840c5f130 Mon Sep 17 00:00:00 2001 From: clion Date: Tue, 27 Jun 2023 11:45:24 +0200 Subject: [PATCH] feat: fail on snapshot diff using afterEach hook --- README.md | 4 ---- cypress/e2e/matchImageSnapshot.cy.ts | 29 ------------------------ package.json | 2 +- src/command.ts | 34 +++++++++++++--------------- 4 files changed, 17 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 2a0905a..b50da76 100644 --- a/README.md +++ b/README.md @@ -150,10 +150,6 @@ cy.matchImageSnapshot({ Run Cypress with `--env updateSnapshots=true` in order to update the base image files for all of your tests. -### Preventing failures - -Run Cypress with `--env failOnSnapshotDiff=false` in order to prevent test failures when an image diff does not pass. - ### Requiring snapshots to be present Run Cypress with `--env requireSnapshots=true` in order to fail if snapshots are missing. This is useful in continuous integration where snapshots should be present in advance. diff --git a/cypress/e2e/matchImageSnapshot.cy.ts b/cypress/e2e/matchImageSnapshot.cy.ts index 8b30ca0..32bc310 100644 --- a/cypress/e2e/matchImageSnapshot.cy.ts +++ b/cypress/e2e/matchImageSnapshot.cy.ts @@ -24,32 +24,3 @@ it('matches with just options', () => { blackout: ['.card-v14'], }) }) - -/** - * this test actually fails but we ignore it - * Ensures that: - * - pipeline still passes - * - failOnSnapshotDiff `false` works - * - that images are output to the `__diff_output__` dir - **/ -describe( - 'fail when image different', - { - env: { - failOnSnapshotDiff: false, - }, - retries: { - openMode: 3, - runMode: 3, - }, - }, - () => { - it('logs out the error when image is different', () => { - cy.get('.feature-v20').invoke('remove') - cy.matchImageSnapshot() - cy.readFile( - './cypress/snapshots/matchImageSnapshot.cy.ts/__diff_output__/fail when image different -- logs out the error when image is different.diff.png', - ).should('exist') - }) - }, -) diff --git a/package.json b/package.json index eaf77c4..c405feb 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "lint:commits": "commitlint --from=HEAD~$(git --no-pager rev-list origin/master..HEAD --count)", "docker:build": "docker build -t cypress-image-snapshot .", "docker:run": "docker run -it --env CYPRESS_updateSnapshots --env CYPRESS_debugSnapshots -v ./cypress:/home/cypress-image-snapshot/cypress cypress-image-snapshot", - "cypress:open": "cypress open --env debugSnapshots=true,failOnSnapshotDiff=false --browser electron --e2e", + "cypress:open": "cypress open --env debugSnapshots=true --browser electron --e2e", "cypress:run": "cypress run --browser electron", "cypress:server": "http-server -s -p 9001 -c-1 ./cypress/server &", "doc": "doctoc README.md --github --notitle", diff --git a/src/command.ts b/src/command.ts index 1354dc5..305264e 100644 --- a/src/command.ts +++ b/src/command.ts @@ -52,11 +52,6 @@ const matchImageSnapshot = nameOrCommandOptions: CypressImageSnapshotOptions | string, commandOptions?: CypressImageSnapshotOptions, ) => { - // access the env here so that it can be overridden in tests - const isFailOnSnapshotDiff: boolean = - typeof Cypress.env('failOnSnapshotDiff') === 'undefined' || false - const isRequireSnapshots: boolean = Cypress.env('requireSnapshots') || false - const {filename, options} = getNameAndOptions( nameOrCommandOptions, defaultOptionsOverrides, @@ -95,15 +90,14 @@ const matchImageSnapshot = return } - if (added && isRequireSnapshots) { - const message = `New snapshot: '${screenshotName}' was added, but 'requireSnapshots' was set to true. - This is likely because this test was run in a CI environment in which snapshots should already be committed.` - if (isFailOnSnapshotDiff) { - throw new Error(message) - } else { - Cypress.log({name: COMMAND_NAME, message}) - return - } + if (added) { + const message = `New snapshot: '${screenshotName}' was added` + Cypress.log({name: COMMAND_NAME, message}) + //An after each hook should check if @matchSnapshot is defined, if yes it should fail the tests + cy.wrap(`A new reference Image was created for ${screenshotName}`, { + log: false, + }).as('matchSnapshot') + return } if (!pass && !added && !updated) { @@ -112,11 +106,15 @@ const matchImageSnapshot = : `Image was ${ diffRatio * 100 }% different from saved snapshot with ${diffPixelCount} different pixels.\nSee diff for details: ${diffOutputPath}` - - if (isFailOnSnapshotDiff && hasTimedOut) { - throw new Error(message) - } else if (hasTimedOut) { + if (hasTimedOut) { Cypress.log({name: COMMAND_NAME, message}) + //An after each hook should check if @matchSnapshot is defined, if yes it should fail the tests + cy.wrap( + `Screenshot comparison failed for ${screenshotName}\n${message}`, + { + log: false, + }, + ).as('matchSnapshot') } else { Cypress.log({name: COMMAND_NAME, message}) Cypress.log({