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

An overview of available visual testing tools
10:23 MIN

An overview of available visual testing tools

Let's get visual - Visual testing in your project

Four key takeaways for implementing visual testing
35:48 MIN

Four key takeaways for implementing visual testing

Let's get visual - Visual testing in your project

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

Introduction to end-to-end testing with Cypress

Testing web3 applications

Q&A on scaling tests and choosing frameworks
38:08 MIN

Q&A on scaling tests and choosing frameworks

Let's get visual - Visual testing in your project

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

Q&A on developer tooling and testing best practices
39:23 MIN

Q&A on developer tooling and testing best practices

Data Mining Accessibility

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

Measure and improve frontend performance by using test automation25:38

Measure and improve frontend performance by using test automation

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

The 2025 State of JavaScript Testing28:33

The 2025 State of JavaScript Testing

Daniel Afonso

It's a (testing) trap! - Common testing pitfalls and how to solve them24:19

It's a (testing) trap! - Common testing pitfalls and how to solve them

Ramona Schwering

Plants vs. Thieves: Automated Tests in the World of Web Security24:09

Plants vs. Thieves: Automated Tests in the World of Web Security

Ramona Schwering

Fighting test flakiness with time machines50:28

Fighting test flakiness with time machines

Filip Hric

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

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
CH
Chris Heilmann
Dev Digest 151: SEO in an AI world, security fixes and Doomed PDFs
Inside last week’s Dev Digest 151 . 🔎 How ChatGPT compares to search and what that means for SEO ✂️ Job cuts across the board as companies curb DEI programs 🟨 @Microsoft releases 161 Windows security updates ⚠️ @Google’s OAuth bug endangers million...
Dev Digest 151: SEO in an AI world, security fixes and Doomed PDFs

From learning to earning

Jobs that call for the skills explored in this talk.

Testmanager

Testmanager

VisualVest GmbH

Remote
Senior
API
Cypress
Selenium
Agile Methodologies