Ramona Schwering

Let's get visual - Visual testing in your project

Your automated tests are blind to visual regressions. Add a visual testing safety net to catch layout breaks and typos automatically.

Let's get visual - Visual testing in your project
#1about 2 minutes

Why minor visual bugs erode user trust

Small UI errors, while not release-blocking, accumulate as technical debt and damage an application's credibility with users.

#2about 2 minutes

How inattentional blindness causes developers to miss bugs

The psychological phenomenon of inattentional blindness explains why focused developers and testers often fail to notice obvious, unexpected visual defects.

#3about 1 minute

The limitations of traditional end-to-end testing

Standard end-to-end tests only validate explicit assertions and do not look "left or right," leaving unintended UI side effects undetected.

#4about 3 minutes

How visual testing works through screenshot comparison

Visual testing automates UI validation by comparing a baseline screenshot of a correct state with a new screenshot to highlight any visual differences.

#5about 3 minutes

An overview of available visual testing tools

Explore the landscape of visual testing tools, from DIY solutions to SaaS platforms like Applitools and Percy, and open-source options like Visual Regression Tracker.

#6about 7 minutes

Setting up the self-hosted Visual Regression Tracker

Learn how to install and configure the open-source, Docker-based Visual Regression Tracker with Cypress for self-hosted visual testing.

#7about 6 minutes

Integrating Percy with CI/CD for large-scale projects

Use Percy for large projects by integrating it into CI/CD pipelines like GitHub Actions or GitLab to automate visual reviews on merge requests.

#8about 9 minutes

How to manage flakiness from dynamic content

Address common causes of flaky visual tests by freezing time, waiting for loading states to complete, and hiding or mocking dynamic elements like images and dates.

#9about 2 minutes

Four key takeaways for implementing visual testing

Recap the core lessons of visual testing: give tests "eyes," use screenshot comparisons, manage dynamic content carefully, and start with tools like Percy or VRT.

#10about 16 minutes

Q&A on scaling tests and choosing frameworks

The speaker answers audience questions about scaling tests for large projects, choosing between Cypress and Playwright, organizing test code, and the necessity of cross-browser visual testing.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

See all videos
Let's get visual - Visual testing in your project44:59

Let's get visual - Visual testing in your project

Ramona Schwering

TDD for Vue.js Developers58:26

TDD for Vue.js Developers

Markus Oberlehner

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

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

Measure and improve frontend performance by using test automation25:38

Measure and improve frontend performance by using test automation

Ramona Schwering

Fighting test flakiness with time machines50:28

Fighting test flakiness with time machines

Filip Hric

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS53:45

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

Anna McDougall

From learning to earning

Jobs that call for the skills explored in this talk.