Merge pull request #3 from uktrade/feature/enhance-test-name-and-threshold-functionality

Enhance test name and threshold functionality

Author: PippoRaimondi

cypress-visual-screenshots/baseline/element.png cypress-visual-screenshots/baseline/image-diff-spec - element.png

@@ -3,6 +3,11 @@ it('should compare screenshot of the entire page', () => {
   cy.compareSnapshot('wholePage')
 })
 
+it('should compare screenshot of the entire page', () => {
+  cy.visit('../../report-example.html')
+  cy.compareSnapshot('wholePageThreshold', 0.2)
+})
+
 it('should compare screenshot from a given element', () => {
   cy.visit('../../report-example.html')
   cy.get('#report-header').compareSnapshot('element')

cypress-visual-screenshots/baseline/wholePage.png cypress-visual-screenshots/baseline/image-diff-spec - wholePage.png

@@ -5,7 +5,7 @@
   "main": "dist/command.js",
   "scripts": {
     "test:unit": "jest src/",
-    "test:e2e": "npx run build && cypress run --browser chrome",
+    "test:e2e": "npm run build && cypress run --browser chrome --headless",
     "build": "npx babel src -d dist"
   },
   "repository": {

cypress-visual-screenshots/baseline/image-diff-spec - wholePageThreshold.png

@@ -1,29 +1,32 @@
 const compareSnapshotCommand = defaultScreenshotOptions => {
+  Cypress.Screenshot.defaults({
+    screenshotOnRunFailure: false
+  })
+
   Cypress.Commands.add(
     'compareSnapshot',
     { prevSubject: 'optional' },
-    (subject, name) => {
+    (subject, name, testThreshold = 0) => {
       let screenshotOptions = defaultScreenshotOptions
-
+      const testName = `${Cypress.spec.name.replace('.js', '')} - ${name}`
       // take snapshot
       const objToOperateOn = subject ? cy.get(subject) : cy
 
       objToOperateOn
-        .screenshot(name, screenshotOptions)
+        .screenshot(testName, screenshotOptions)
         .task('copyScreenshot', {
-          testName: name,
+          testName,
         })
 
       // run visual tests
       const options = {
-        testName: name,
+        testName,
+        testThreshold,
       }
 
-      cy.task('compareSnapshotsPlugin', options).then((result) => {
-        if (result > 0) {
-          throw new Error(
-            `The image has ${result} pixel differences.`
-          )
+      cy.task('compareSnapshotsPlugin', options).then((percentage) => {
+        if (percentage > testThreshold) {
+          throw new Error(`The image difference percentage ${percentage} exceeded the threshold: ${testThreshold}`)
         }
       })
     }

cypress/specs/image-diff-spec.js

@@ -44,14 +44,16 @@ async function compareSnapshotsPlugin(args) {
     diff.data,
     baselineFullCanvas.width,
     baselineFullCanvas.height,
-    { threshold: process.env.CYPRESS_VISUAL_THRESHOLD || 0.1 }
+    { threshold: 0.1 }
   )
+  
+  const percentage = (pixelMismatchResult / diff.width / diff.height) ** 0.5
 
-  if (pixelMismatchResult != 0) {
+  if (percentage > args.threshold) {
     diff.pack().pipe(fs.createWriteStream(paths.image.diff(args.testName)))
   }
 
-  return pixelMismatchResult
+  return percentage
 }
 
 const getCompareSnapshotsPlugin = (on) => {