Let's get visual - Visual testing in your project

Why do your end-to-end tests keep missing obvious visual bugs? Learn how visual testing can automatically spot the difference and protect your UI from embarrassing errors.

#1about 4 minutes

The hidden cost of small UI and styling bugs

Minor visual errors erode user trust and accumulate as technical debt, even if they don't break core functionality.

#2about 3 minutes

Why humans and automated tests miss visual bugs

Inattentional blindness causes humans to overlook unexpected changes, while traditional tests only validate explicitly defined assertions.

#3about 3 minutes

How visual testing works with screenshot comparisons

Visual testing automates the "spot the difference" process by comparing a baseline screenshot with a current one to highlight unintended UI changes.

#4about 2 minutes

The pitfalls of building your own visual testing solution

Writing your own visual testing can lead to false negatives due to pixel sensitivity, rendering differences, and high maintenance overhead.

#5about 8 minutes

Setting up the open source Visual Regression Tracker

The Visual Regression Tracker is a self-hosted, open-source tool that integrates with Cypress for managing and approving visual diffs.

#6about 6 minutes

Integrating Percy into your CI/CD pipeline

Percy simplifies visual testing for larger projects with seamless CI integration for platforms like GitLab and GitHub Actions, including notifications.

#7about 6 minutes

Managing flakiness from dynamic content and loading

Avoid false negatives from dynamic data like dates by freezing time, and prevent flakiness by using assertions to wait for the UI to stabilize before taking a snapshot.

#8about 6 minutes