Let's get visual - Visual testing in your project

Your automated tests are blind to visual regressions. Add a visual testing safety net to catch layout breaks and typos automatically.

#1about 2 minutes

Why minor visual bugs erode user trust

Small UI errors, while not release-blocking, accumulate as technical debt and damage an application's credibility with users.

#2about 2 minutes

How inattentional blindness causes developers to miss bugs

The psychological phenomenon of inattentional blindness explains why focused developers and testers often fail to notice obvious, unexpected visual defects.

#3about 1 minute

The limitations of traditional end-to-end testing

Standard end-to-end tests only validate explicit assertions and do not look "left or right," leaving unintended UI side effects undetected.

#4about 3 minutes

How visual testing works through screenshot comparison

Visual testing automates UI validation by comparing a baseline screenshot of a correct state with a new screenshot to highlight any visual differences.

#5about 3 minutes

An overview of available visual testing tools

Explore the landscape of visual testing tools, from DIY solutions to SaaS platforms like Applitools and Percy, and open-source options like Visual Regression Tracker.

#6about 7 minutes

Setting up the self-hosted Visual Regression Tracker

Learn how to install and configure the open-source, Docker-based Visual Regression Tracker with Cypress for self-hosted visual testing.

#7about 6 minutes

Integrating Percy with CI/CD for large-scale projects

Use Percy for large projects by integrating it into CI/CD pipelines like GitHub Actions or GitLab to automate visual reviews on merge requests.

#8about 9 minutes

How to manage flakiness from dynamic content

Address common causes of flaky visual tests by freezing time, waiting for loading states to complete, and hiding or mocking dynamic elements like images and dates.

#9about 2 minutes

Four key takeaways for implementing visual testing

Recap the core lessons of visual testing: give tests "eyes," use screenshot comparisons, manage dynamic content carefully, and start with tools like Percy or VRT.

#10about 16 minutes

Q&A on scaling tests and choosing frameworks

The speaker answers audience questions about scaling tests for large projects, choosing between Cypress and Playwright, organizing test code, and the necessity of cross-browser visual testing.