WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 24, 2021

Let's get visual - Visual testing in your project

Ramona Schwering

Standard end-to-end tests are blind to visual regressions that silently erode user trust. Stop shipping formatting bugs by giving your automation framework eyes through structured screenshot comparison platforms.

Pause
Mute Enter Fullscreen
#1 about 6 min

The business impact of minor front-end bugs

Small front-end styling errors consistently diminish user trust and continually increase technical debt.

#2 about 4 min

Inattentional blindness and limitations of end-to-end tests

Manual quality assurance and traditional functional scripts regularly fail to catch unexpected visual display changes.

#3 about 3 min

Mechanisms of automated visual regression testing

Automated baseline comparisons provide a reliable method to identify unintended interface differences.

#4 about 2 min

Pitfalls of building custom screenshot comparison tooling

Maintaining in-house pixel comparison logic introduces high maintenance effort and severe false-negative risks.

#5 about 8 min

Setting up visual regression tracker with Cypress

Configuring docker services and environment variables helps orchestrate local visual testing setups via Cypress.

#6 about 7 min

Integrating Percy into continuous integration pipelines

Executing automated cross-browser visual checks uncovers integration issues quickly during nightly CI builds.

#7 about 4 min

Preventing test flakiness by freezing client clocks

Standardizing dynamic client-side dates avoids time-based snapshot divergences and stabilizes test runs.

#8 about 2 min

Capturing consistent snapshots by asserting loading states

Asserting complete UI rendering eliminates intermittent test failures caused by slow asynchronous data.

#9 about 7 min

Masking dynamic UI elements to avoid false negatives

Hiding randomly generated server content via CSS injections and provider configurations prevents false failure alerts.

#10 about 2 min

Key takeaways for implementing visual testing tools

Integrating baseline comparisons with existing test suites requires careful coverage monitoring to avoid hiding regressions.

#11 about 5 min

Prioritizing visual tests and handling test suite separation

Separating visual checks from end-to-end suites prevents repetitive data mocking and optimizes test execution times.

Matching moments

2:20 min

Catching interface glitches through visual regression testing

Julian Richter Julian Richter · World Congress 2025

2:17 min

Key takeaways on adding visual tests to frontend pipelines

Ramona Schwering Ramona Schwering · LIVE

1:42 min

Limitations of traditional test automation in catching visual errors

Ramona Schwering Ramona Schwering · LIVE

3:27 min

Evaluating visual testing tools and open source ecosystem options

Ramona Schwering Ramona Schwering · LIVE

1:58 min

Catching unintended UI changes with visual regression testing

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

16:16 min

Audience questions on visual testing execution and framework differences

Ramona Schwering Ramona Schwering · LIVE

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
almost 5 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

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

What I Got Wrong Shipping an MCP Server for Live Infrastructure

  • Pritesh Kiri

    Harness

    Developer Relations Engineer

Open session

Supply Chain Security for the Everyday Engineer

  • Pradumna Saraf

    Kestra Technologies

    Quality Assurance Engineer

Open session

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

  • Bharat Sharma

    Booking

    Senior Engineering Manager

Related videos

Let's get visual - Visual testing in your project thumbnail
54:23
LIVE • over 3 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

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

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

Fighting test flakiness with time machines

Filip Hric

How not to test thumbnail
43:07
World Congress 2021 • over 5 years ago

How not to test

Golo Roden

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.