Visual regression testing

.circleci/config.yml

@@ -95,10 +95,10 @@ jobs:
           when: on_fail
       - store_test_results:
           path: test_results
-      - store_artifacts:
-          path: cypress/videos
       - store_artifacts:
           path: integration_tests/screenshots
+      - store_artifacts:
+          path: cypress-image-diff-screenshots
       - store_artifacts:
           path: ~/docker-logs
 

.gitignore

@@ -129,4 +129,5 @@ integration_tests/screenshots/
 **/.DS_Store
 .run
 
-cypress/
+cypress/
+/cypress-image-diff-screenshots/comparison/

cypress-image-diff.config.js

@@ -0,0 +1,5 @@
+const config = {
+  FAILURE_THRESHOLD: 0.05, // 5% difference allowed
+}
+
+module.exports = config

cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin'
 import { resetStubs } from './integration_tests/mockApis/wiremock'
 import auth from './integration_tests/mockApis/auth'
 
@@ -13,7 +14,7 @@ export default defineConfig({
   },
   taskTimeout: 60000,
   e2e: {
-    setupNodeEvents(on) {
+    setupNodeEvents(on, config) {
       on('task', {
         reset: resetStubs,
         ...auth,
@@ -23,6 +24,9 @@ export default defineConfig({
           return null
         },
       })
+
+      // Add the visual regression plugin
+      return getCompareSnapshotsPlugin(on, config)
     },
     baseUrl: 'http://localhost:6789',
     excludeSpecPattern: '**/!(*.cy).ts',

integration_tests/e2e/visual-comparison.cy.ts

@@ -0,0 +1,28 @@
+describe('Rendering of pages we can GET', () => {
+  before(() => {
+    cy.createSentencePlan().then(planDetails => {
+      cy.wrap(planDetails).as('plan')
+      cy.openSentencePlan(planDetails.oasysAssessmentPk)
+    })
+  })
+
+  it('take plan page screenshot', () => {
+    cy.visit('/plan')
+    cy.compareSnapshot('plan-page')
+  })
+
+  it('take create goal page screenshot', () => {
+    cy.visit('/create-goal/accommodation')
+    cy.compareSnapshot('create-goal-page')
+  })
+
+  it('take plan history page screenshot', () => {
+    cy.visit('/plan-history')
+    cy.compareSnapshot('plan-history-page')
+  })
+
+  it('take about page screenshot', () => {
+    cy.visit('/about')
+    cy.compareSnapshot('about-page')
+  })
+})

integration_tests/support/index.ts

@@ -1,7 +1,10 @@
+import compareSnapshotCommand from 'cypress-image-diff-js/command'
 import { addGoalToPlan, addStepToGoal, createSentencePlan, lockPlan, openSentencePlan } from './commands/backend'
 import { checkAccessibility } from './commands/accessibility'
 import 'cypress-axe'
 
+compareSnapshotCommand()
+
 // Handover/Auth
 Cypress.Commands.add('openSentencePlan', openSentencePlan)
 Cypress.Commands.add('createSentencePlan', createSentencePlan)