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:58 min

Catching unintended UI changes with visual regression testing

Bartosz Leczycki Bartosz Leczycki +1 · World Congress 2026 North America

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

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Read more, Prompt Less thumbnail
1:01:30
6 days ago

WeAreDevelopers LIVE - Read more, Prompt Less

Chris Heilmann, Daniel Cranney, Luise Freese

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
13 days ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
19 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
about 1 month 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
about 1 month 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
about 1 month ago

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

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Autopsy of an Autonomous Incident: When the Agent Made It Worse

  • Navin Pai

    StackGen

    Director of Engineering

Open session

AI Is the Easy Part: Why Faster Engineers Don't Make Faster Businesses

  • Bharat Sharma

    Booking

    Senior Engineering Manager

Open session

What I Got Wrong Shipping an MCP Server for Live Infrastructure

  • Pritesh Kiri

    Harness

    Developer Relations Engineer

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 • about 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.