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 · WWC 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

16:16 min

Audience questions on visual testing execution and framework differences

Ramona Schwering Ramona Schwering · LIVE

2:00 min

The software testing timeline and regression checking pitfalls

Ingo Philipp · LIVE

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
over 4 years ago

The Eternal Sunshine of the Zero Build Pipeline

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

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
over 4 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
over 4 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Agents Can't Iterate Against Tests That Lie

Rocky Warren

Senior Staff Software Engineer at Clipboard

Rocky Warren
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Paweł Matynia, Bartosz Leczycki

Paweł Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Your Evals Passed. Your Agent Just Emptied a Database.

Tejas Pravinbhai Patel

IEEE Award-Winning Researcher | Best Keynote Speaker | Sr. Software Engineer at Amazon | AI Systems & Agent Architect

Tejas Pravinbhai Patel
Open session

World Congress 2026 North America

Reinventing Testing Practices in the AI Era

Eric Deandrea

Java Champion & Senior Principal Software Engineer, IBM

Eric Deandrea

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
WWC 2023 • almost 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 • over 4 years ago

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

Anna Mcdougall

Fighting test flakiness with time machines thumbnail
50:28
LIVE • over 2 years ago

Fighting test flakiness with time machines

Filip Hric

How not to test thumbnail
43:07
WWC 2021 • about 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
WWC 2024 • almost 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.