Summary

Visual testing compares the current state of a page against a baseline image to identify visual differences caused by code changes. They are crucial to ensure the upgrade doesn’t introduce any unwanted side effects.

We use Cypress for visual testing. Check the official documentation here.

How it works

Visual testing in Cypress involves comparing screenshots of the website before and after code changes. This process helps detect visual differences, such as layout shifts, styling changes, or other unexpected modifications.

• Highlighting Differences: Any discrepancies between the screenshots are highlighted in red, making it easy to spot changes.

• Pixel-by-Pixel Comparison: The system performs a detailed pixel-by-pixel comparison of the screenshots. However, this approach can occasionally result in false negatives, such as when dynamic content (e.g., moving video elements) causes minor, unavoidable differences.

We have configured visual tests for a number of the most important pages on the website, including: Styleguide elements, Account, Homepage (Before and after login), Registration Page, Basket (Before and after login), and Checkout process. The pages under test are not fixed. They can be, of course, modified, added or removed.

These pages are tested across both mobile and desktop views to ensure consistent appearance and functionality.

1. Page Visit: Cypress visits the page and ensures it loads correctly.
2. Login (if needed): If the test involves checking the status after login, Cypress logs in automatically.
3. Interactivity: In some cases, Cypress clicks on elements (e.g., buttons) to trigger actions like making a sidebar visible.
4. Screenshot Capture: Once the page is in the desired state, Cypress takes a screenshot for visual comparison.

Cypress Visual Testing Workflow

The testing pipeline consists of two primary jobs:

1. Run Cypress Test
   This job ensures that the website's pages load correctly, confirming their basic availability.
   Pages URLs are defined in the customer theme in cypress/support/variables.js

2. Run Cypress Visual Tests
   This job compares the screenshots to detect visual differences.

   Important

   This job is configured to allow failure, as styling changes are often intentional and do not necessarily indicate a problem.