E2E visual regression testing

.docker/wait-loader.sh

@@ -17,16 +17,37 @@ spinner() {
 # Function to display loader with a message
 show_loader() {
   local message=$1
-  shift
+  local port=$2
+  shift 2
   echo -n "$message"
   ( "$@" ) &
   local loader_pid=$!
+  local success=false
   while ps a | awk '{print $1}' | grep -q $loader_pid; do
     sleep 0.5
     echo -n "■"
+
+    # Check if Docker container host returns a 302 (replace with your actual check)
+    http_status=$(curl -s -o /dev/null -w "%{http_code}" "http://localhost:$port")
+    if [ "$http_status" -eq 302 ]; then
+      success=true
+      break
+    fi
   done
-  echo " Done."
+
+  if [ "$success" = true ]; then
+    echo " Done."
+  else
+    echo " Failed: Docker container host did not return a 302."
+    # Optionally, you can add cleanup or error handling code here.
+  fi
 }
 
-# Usage example
-show_loader "Building app containers. Please wait " sleep 60
+# Usage example with port as a parameter
+if [ "$#" -lt 1 ]; then
+  echo "Usage: $0 <port>"
+  exit 1
+fi
+
+port=$1
+show_loader "Building app containers. Please wait " "$port" sleep 60

Makefile

@@ -4,7 +4,7 @@ ROOT_DIR:=$(shell dirname $(realpath $(firstword $(MAKEFILE_LIST))))
 fix-lint:
 	docker-compose run --rm php sh -c "vendor/bin/php-cs-fixer fix --using-cache=no"
 
-#PS1785
+#PS1785 without PS autoinstall, both CI and local
 e2eh1785:
 	# detaching containers
 	docker-compose -f docker-compose.1785.yml up -d --force-recreate
@@ -27,14 +27,14 @@ e2eh1785:
 	# chmod all folders
 	docker exec -i prestashop-mollie-1785 sh -c "chmod -R 777 /var/www/html"
 
-#PS8
+#PS8 for local machine docker build with PS autoinstall
 e2eh8_local:
 	# detaching containers
 	docker-compose -f docker-compose.8.yml up -d --force-recreate
 	# sees what containers are running
 	docker-compose -f docker-compose.8.yml ps
 	# waiting for app containers to build up
-	/bin/bash .docker/wait-loader.sh
+	/bin/bash .docker/wait-loader.sh 8142
 	# seeding the customized settings for PS
 	mysql -h 127.0.0.1 -P 9459 --protocol=tcp -u root -pprestashop prestashop < ${PWD}/tests/seed/database/prestashop_8.sql
 	# installing module
@@ -48,6 +48,7 @@ e2eh8_local:
 	# chmod all folders
 	docker exec -i prestashop-mollie-8 sh -c "chmod -R 777 /var/www/html"
 
+#PS8 for CI build with PS autoinstall
 e2eh8:
 	# detaching containers
 	docker-compose -f docker-compose.8.yml up -d --force-recreate

cypress.config.js

@@ -1,6 +1,15 @@
 const { defineConfig } = require('cypress')
+const { initPlugin } = require("@frsource/cypress-plugin-visual-regression-diff/plugins");
 
 module.exports = defineConfig({
+  env: {
+    pluginVisualRegressionDiffConfig: { threshold: 0.01 },
+    pluginVisualRegressionMaxDiffThreshold: 0.01,
+    pluginVisualRegressionUpdateImages: false, // for updating or not updating the diff image automatically
+    pluginVisualRegressionImagesPath: 'cypress/screenshots',
+    pluginVisualRegressionScreenshotConfig: { scale: true, capture: 'fullPage' },
+    pluginVisualRegressionCreateMissingImages: true, // baseline images updating
+  },
   chromeWebSecurity: false,
   experimentalMemoryManagement: true,
   experimentalSourceRewriting: true,
@@ -30,6 +39,7 @@ module.exports = defineConfig({
       require('./cypress/plugins/index.js')(on, config)
       require("cypress-fail-fast/plugin")(on, config);
       require('cypress-terminal-report/src/installLogsPrinter')(on);
+      initPlugin(on, config);
       return config;
     },
     // setupNodeEvents(on, config) {

cypress/e2e/ps1785/01_mollie.ps1785.ModuleConfiguration.specs.js

@@ -81,6 +81,8 @@ it('C339339: 03 Checking the Advanced Settings tab, verifying the Front-end comp
       cy.get('[name="MOLLIE_SUBSCRIPTION_ORDER_CARRIER_ID"]').select('My carrier')
       cy.get('#module_form_submit_btn').click({force:true}) //checking the saving
       cy.get('[class="alert alert-success"]').should('be.visible') //checking if saving returns green alert
+      cy.reload()
+      cy.matchImage(); // let's make a snapshot for visual regression testing later, if UI matches
       //cy.window() will check if there are no Errors in console
 });
 it('C688472: Checking the Subscriptions tab, and console errors', () => {
@@ -97,5 +99,6 @@ it('C688473: Checking the Subscriptions FAQ, and console errors', () => {
       cy.get(':nth-child(3) > .col-lg-12 > .card').should('be.visible')
       cy.get(':nth-child(4) > .col-lg-12 > .card').should('be.visible')
       cy.get(':nth-child(5) > .col-lg-12 > .card').should('be.visible')
+      cy.matchImage(); // let's make a snapshot for visual regression testing later, if UI matches
 });
 })

cypress/e2e/ps1785/02_mollie.ps1785.EnablingPaymentsOrdersAPI.specs.js

@@ -33,5 +33,7 @@ it('C339341: 04 Enabling All payments in Module BO [Orders API]', () => {
     cy.ConfOrdersAPI1784()
     cy.get('[type="submit"]').first().click({force:true})
     cy.get('[class="alert alert-success"]').should('be.visible')
+    cy.reload()
+    cy.matchImage(); // let's make a snapshot for visual regression testing later, if UI matches
 })
 })

cypress/e2e/ps1785/03_mollie.ps1785.PaymentTestsOrdersAPI.js

@@ -51,6 +51,7 @@ it.skip('C339343: 06 Vouchers Order BO Refunding, Shipping (Paid part only) [Ord
 })
 it('C339344: 07 Bancontact Checkouting [Orders API]', () => {
       cy.navigatingToThePayment()
+      cy.matchImage(); // let's make a snapshot for visual regression testing later, if UI matches
       //Payment method choosing
       cy.contains('Bancontact').click({force:true})
       cy.get('.condition-label > .js-terms').click({force:true})

cypress/e2e/ps1785/07_mollie.ps1785.VisualRegressionTests.cy.js

@@ -0,0 +1,55 @@
+/// <reference types="Cypress" />
+//Caching the BO and FO session
+const login = (MollieBOFOLoggingIn) => {
+  cy.session(MollieBOFOLoggingIn,() => {
+  cy.visit('/admin1/')
+  cy.url().should('contain', 'https').as('Check if HTTPS exists')
+  cy.get('#email').type('[email protected]',{delay: 0, log: false})
+  cy.get('#passwd').type('demodemo',{delay: 0, log: false})
+  cy.get('#submit_login').click().wait(1000).as('Connection successsful')
+  cy.visit('/en/my-account')
+  cy.get('#login-form [name="email"]').eq(0).type('[email protected]')
+  cy.get('#login-form [name="password"]').eq(0).type('demodemo')
+  cy.get('#login-form [type="submit"]').eq(0).click({force:true})
+  cy.get('#history-link > .link-item').click()
+  })
+  }
+
+describe('PS1785 Visual Regression tests suite', {
+  retries: {
+    runMode: 0,
+    openMode: 0,
+  },
+  failFast: {
+    enabled: false,
+  }
+},() => {
+  beforeEach(() => {
+    login('MollieBOFOLoggingIn')
+})
+it('PS1785 - Testing the visual regression of General Settings page', () => {
+  cy.visit('/admin1/')
+  cy.get('.mi-mollie').click({fore:true})
+  cy.get('#subtab-AdminMollieModule').click()
+  cy.matchImage();
+});
+it('PS1785 - Testing the visual regression of Advanced Settings page', () => {
+  cy.visit('/admin1/')
+  cy.get('.mi-mollie').click({fore:true})
+  cy.get('#subtab-AdminMollieModule').click()
+  cy.contains('Advanced settings').click()
+  cy.matchImage();
+});
+it('PS1785 - Testing the visual regression of Subscriptions FAQ', () => {
+  cy.visit('/admin1/')
+  cy.get('.mi-mollie').click({fore:true})
+  cy.get('#subtab-AdminMollieModule').click()
+  cy.get('#subtab-AdminMollieSubscriptionFAQ').click()
+  cy.matchImage();
+});
+it('PS1785 - Testing the visual regression of Payments in the Checkout', () => {
+  cy.navigatingToThePayment()
+  cy.matchImage();
+});
+
+})

cypress/e2e/ps8/01_mollie.ps8.ModuleConfiguration.specs.js

@@ -83,6 +83,8 @@ it('C339339: Checking the Advanced Settings tab, verifying the Front-end compone
       cy.get('[name="MOLLIE_SUBSCRIPTION_ORDER_CARRIER_ID"]').select('Click and collect')
       cy.get('#module_form_submit_btn').click({force:true}) //checking the saving
       cy.get('[class="alert alert-success"]').should('be.visible') //checking if saving returns green alert
+      cy.reload()
+      cy.matchImage(); // let's make a snapshot for visual regression testing later, if UI matches
       //cy.window() will check if there are no Errors in console
 });
 it('C688472: Checking the Subscriptions tab, and console errors', () => {
@@ -101,5 +103,7 @@ it('C688473: Checking the Subscriptions FAQ, and console errors', () => {
       cy.get(':nth-child(4) > .col-lg-12 > .card').should('be.visible')
       cy.get(':nth-child(5) > .col-lg-12 > .card').should('be.visible')
       cy.get(':nth-child(6) > .col-lg-12 > .card').should('be.visible')
+      cy.matchImage(); // let's make a snapshot for visual regression testing later, if UI matches
+
 });
 })

cypress/e2e/ps8/02_mollie.ps8.EnablingPaymentsOrdersAPI.specs.js

@@ -38,5 +38,7 @@ it('C339341: 04 Enabling All payments in Module BO [Orders API]', () => {
     cy.ConfOrdersAPI1784()
     cy.get('[type="submit"]').first().click({force:true})
     cy.get('[class="alert alert-success"]').should('be.visible')
+    cy.reload()
+    cy.matchImage(); // let's make a snapshot for visual regression testing later, if UI matches
 })
 })