Ramona Schwering

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.

Let's get visual - Visual testing in your project
#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

Handling intentionally random or changing elements

Manage elements that change by design, like random images or server-side timestamps, by ignoring specific regions or temporarily modifying their CSS.

#9about 2 minutes

Four key learnings for implementing visual testing

A summary of key takeaways, including giving tests "eyes," using screenshot comparisons, handling inconsistencies, and recommended starting tools.

#10about 4 minutes

Q&A: Deciding what to test and separating test types

Answering audience questions about how to prioritize what to test visually and whether to separate visual tests from standard end-to-end tests.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Let's get visual - Visual testing in your project54:23

Let's get visual - Visual testing in your project

Ramona Schwering

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS53:45

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS

Anna McDougall

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Measure and improve frontend performance by using test automation25:38

Measure and improve frontend performance by using test automation

Ramona Schwering

One-click-to-production: Test and automate your application31:15

One-click-to-production: Test and automate your application

Bartosz Pietrucha

Lies we Tell Ourselves As Developers31:13

Lies we Tell Ourselves As Developers

Stefan Baumgartner

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

How to TDD in legacy code45:43

How to TDD in legacy code

Gil Zilberfeld

From learning to earning

Jobs that call for the skills explored in this talk.