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.

Matching moments

Introduction to end-to-end testing with Cypress
00:04 MIN

Introduction to end-to-end testing with Cypress

Testing web3 applications

Understanding end-to-end testing and the benefits of Cypress
02:58 MIN

Understanding end-to-end testing and the benefits of Cypress

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

Audience Q&A on testing strategies
51:22 MIN

Audience Q&A on testing strategies

Yes, You Need to Unit Test your JavaScript. Here's How.

Verifying the user interface with automated UI tests
14:53 MIN

Verifying the user interface with automated UI tests

Trunk-Based Development at Scale: Real-World Insights from a High-Traffic Luxury E-Commerce Platform

Exploring modern tools for web interaction and analysis
1:04:01 MIN

Exploring modern tools for web interaction and analysis

WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney

Testing is a social and human-centric science
10:30 MIN

Testing is a social and human-centric science

Excellent Software Testing

Using end-to-end tests for performance monitoring
05:26 MIN

Using end-to-end tests for performance monitoring

Measure and improve frontend performance by using test automation

Creating unit and integration tests with a visual canvas
19:46 MIN

Creating unit and integration tests with a visual canvas

Are you still programming unit tests or already generating?

Featured Partners

Related Videos

See all 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

The 2025 State of JavaScript Testing28:33

The 2025 State of JavaScript Testing

Daniel Afonso

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

From learning to earning

Jobs that call for the skills explored in this talk.

UX Engineer

Test Site

€52K
Unix
Configuration Management