Let's get visual - Visual testing in your project

Ramona Schwering
Ramona Schwering

April 16, 2021

This content is also available in german

Visual testing compares the appearance of your application with a previous state.
SymfonyWorld Germany 2021
CypressDE Meetup 2021
WeAreDevelopers JavaScript Congress 2021
TECH(K)NOWDAY 2022
Developer Week 2022
VueJS Nation 2023
WeAreDevelopers VueJS Day 2023

Abstract

Testing is important: You probably already know that and so you do it yourself - or your dear testers do, at least. But as your project grows, this becomes more and more tedious - each of your changes can break something in your project without you noticing it. But chasing these side-effects with a checklist after every merge is no solution either. However, end-to-end tests only do what you tell them to do - so they don't look left or right. For example, styling errors can go unnoticed.

So what now? Visual testing compares the appearance of your application with a previous state. If changes become visible, you can react to them. So you or your testers have their eyes everywhere - without the need to check manually over and over again.

I've been using visual testing for a while now and it has saved my neck a few times. Let's take a look at my journey together and explore if and how visual testing can help in your projects as well.

Slides

Recordings