Visual regression testing at Doctolib

Thomas Bentkowski
Mar 4 · 7 min read
“There’s no hiding from us now.”
The differential approach of visual tests

Why do we have visual tests?

Proactive monitoring of our front-stack

Owning our front stack and getting as close as possible to it.

Reducing technical debt

Reducing time spent on testing

Maintain a higher level of quality

Reaching pixel perfect interfaces

Visual tests are more simple than they were before

Trying to make visual test the old fashion way
Adding a visual test

CI integration is a must

Tooling

Argos-ci

Would you like to accept the visual modifications you have introduced?

Argos usage

A visual test
Our build report on GitHub
An Argos report header
Doctolib build status report in GitHub

ImageMagick, quick dive

“[…] to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats […] to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves”.

Concrete example of an added modification

Visual testing is a challenge

Flakiness

Distribution of Doctolib build statuses

Build time

Argos average build duration

Argos maintainability

Next steps

Doctolib

Pour un système de santé plus humain, efficace et connecté

Thomas Bentkowski

Written by

QA Analyst at Doctolib

Doctolib

Doctolib

Pour un système de santé plus humain, efficace et connecté