WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Apr 18, 2023

Let's get visual - Visual testing in your project

Ramona Schwering

Why do robust E2E tests still miss glaring UI bugs? Discover how automated visual testing gives your CI/CD pipeline eyes to catch layout breaks before they reach production.

Pause
Mute Enter Fullscreen
#1 about 2 min

Introduction to the speaker and visual testing journey

How the speaker translated quality assurance experience into frontend automation.

#2 about 3 min

The impact of minor user interface bugs on trust

How subtle visual defects accumulate as technical debt and affect user confidence.

#3 about 3 min

How unintentional blindness prevents humans from isolating visual bugs

Why developers naturally overlook obvious visual errors due to cognitive focus and lack of attention.

#4 about 2 min

Limitations of traditional test automation in catching visual errors

Why end-to-end tests miss unintended user interface side effects unless explicitly asserted.

#5 about 3 min

Automating frontend quality with screenshot comparison and visual review

How screenshot comparisons highlight structural and styling changes for human approval.

#6 about 4 min

Evaluating visual testing tools and open source ecosystem options

Comparing custom test scripts against dedicated management tools for tracking visual differences.

#7 about 6 min

Integrating visual regression tracker with cypress testing frameworks locally

Configuring the open-source Visual Regression Tracker inside a standard Cypress configuration layout.

#8 about 7 min

Setting up continuous integration pipelines with percy for projects

Running dedicated visual tests on nightly CI jobs to efficiently catch rendering anomalies.

#9 about 8 min

Identifying root causes of flaky testing and false negatives

Understanding false negatives triggered by dynamic page content like timestamps and loading states.

#10 about 3 min

Applying code configurations to stabilize rendering of dynamic elements

Using threshold fuzziness and client-side time freezing to prevent unnecessary screenshot mismatches.

#11 about 3 min

Key takeaways on adding visual tests to frontend pipelines

A summary of teaching automated tools to spot user interface differences consistently.

#12 about 17 min

Audience questions on visual testing execution and framework differences

Insights on managing asynchronous application requests, suite execution times, and testing architecture.

Matching moments

2:20 min

Catching interface glitches through visual regression testing

Julian Richter Julian Richter · World Congress 2025

1:23 min

Key takeaways for implementing visual testing tools

Ramona Schwering Ramona Schwering · JS Congress

2:46 min

Mechanisms of automated visual regression testing

Ramona Schwering Ramona Schwering · JS Congress

7:40 min

Overcoming visual clutter and screen reader testing misconceptions

Chris Heilmann Chris Heilmann +2 · LIVE

3:08 min

Implementing local visual regression testing

Emma Britnor Emma Britnor · World Congress 2024

1:29 min

Bridging developers, testers, and requirements engineers in testing

Johannes Bergsmann Johannes Bergsmann +1 · World Congress 2023

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
10 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
17 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
18 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
24 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
25 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
30 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Related videos

Let's get visual - Visual testing in your project thumbnail
44:59
JS Congress • almost 5 years ago

Let's get visual - Visual testing in your project

Ramona Schwering

Measure and improve frontend performance by using test automation thumbnail
25:38
World Congress 2023 • almost 3 years ago

Measure and improve frontend performance by using test automation

Ramona Schwering

Fighting test flakiness with time machines thumbnail
50:28
LIVE • almost 3 years ago

Fighting test flakiness with time machines

Filip Hric

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS thumbnail
53:45
JS Congress • almost 5 years ago

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

Anna Mcdougall

Continuous Accessibility thumbnail
24:43
World Congress 2026 Europe • 3 months ago

Continuous Accessibility

Jörg Jakoby

It's a (testing) trap! - Common testing pitfalls and how to solve them thumbnail
24:19
World Congress 2024 • about 2 years ago

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

Ramona Schwering

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.