Visual Tests

📄️ 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.

📄️ Common issues (`run cypress tests`)

"AssertionError: expected 404 to equal 200" error

📄️ Common issues (`run cypress visual tests`)

"Cannot find element" error

📄️ Custom Commands

We have a number of custom commands or functions that help the testing. Then include simulating ov visiting certain URLs, setting specific viewports, logging in or adding products to the basket. However, when running visual tests in Cypress, certain elements — such as images that load asynchronously or animated carousels — can cause false negatives due to slight variations in rendering time. To prevent these inconsistencies from affecting test results, we use custom Cypress commands to hide such elements before capturing snapshots.