Visuelle Regressionstests mit puppeteer und pixelmatch

Auf dem inovex Meetup in Köln am 11.10.2018 sprach inovexler Robert gemeinsam mit unserem Kunden ERGO Direkt darüber, wie die Qualität der Komponentenbibliothek hochgehalten werden kann.

Digitale Qualität beschäftigt uns in unseren Projekten – von der Continuous Delivery bis zu UI-Komponenten. An diesem Abend betrachteten wir deshalb Tools, die helfen, digitale Qualität sicherzustellen sowie eine Komponentenbibliothek, die wir bei einem unserer Kunden eingeführt haben, um Effizienz und Konsistenz zu steigern.

inovexler Robert Seibert hielt an diesem Abend gemeinsam mit Alexander Ehmann von unserem Kunden ERGO Direkt den Vortrag:

„Visuelle Regressionstests mit puppeteer und pixelmatch in Production: Wie wir damit die Qualität unserer Komponentenbibliothek hoch halten“

Abstract:

Für unseren Kunden ERGO Direkt entwickeln wir seit 18 Monaten eine kontinuierlich wachsende React-Komponentenbibliothek, die von immer mehr Teams eingesetzt wird.

Bevor es die Komponentenbibliothek gab, haben alle Entwicklerteams die Design-Vorgaben selbst in React-Komponenten umgebaut. Was zum Nachteil hatte, dass diese Arbeit immer mehrfach gemacht wurde, die jeweiligen Implementierungen sich unterschieden haben, Design-Updates mehrfach nachgepflegt werden müssen und die generelle Qualität bedingt durch Liefertermine negativ beeinflusst wird.

Die Komponentenbibliothek löst alle diese Probleme, indem sie zentral und nur einmal mit hohem Qualitätsbewusstsein gepflegt wird, leicht von allen Entwicklern eingesetzt und geupdated werden kann, wenn neue Features oder Bugfixes zur Verfügung stehen.

Über die Zeit sind immer mehr Komponenten und auch Themes dazu gekommen, welche zu einer Multiplikation der Varianten der Komponenten führte und leicht unabsichtlich grafische Bugs entstehen ließ, welche erst in Produktion bemerkt wurden. Deshalb haben wir, um eine fortlaufend hohe Qualität zu gewähren, neben den Unit-Tests seit neun Monaten auch visuelle Regressionstests in unsere Pipeline eingebaut. Bei diesen Tests werden Screenshots von den Komponenten gemacht und gegen Referenzbilder verglichen, um etwaige ungewollte Änderungen abzufangen, bevor sie ausgeliefert werden.

Nach einer kurzen Einleitung aus Sicht eines Product Owners zur Motivation einer Komponentenbibliothek und deren Qualitätsansprüchen, geben wir einen Einblick in unser technisches Setup und teilen, was wir dabei gelernt haben und wann und warum es Sinn macht, visuelle Regressionstests durchzuführen.

Event: inovex Meetup Köln

Datum: 11.10.2018

Speaker: Robert Seibert

Robert Seibert

Robert Seibert ist Web-Entwickler und seit Mitte 2016 bei inovex tätig. Er beschäftigt sich mit der Umsetzung moderner Web-Applikationen, dabei insbesondere mit den Themen User-zentrisches Design und digitale Qualität – daher gehören Technologien wie Angular und React sowie aktuelle Toolchains selbstverständlich zu seinem Skill Set.

Sie haben Fragen oder möchten zu diesem Thema beraten werden?

Dann rufen Sie uns an unter +49 (0)721 619 021-0 oder schreiben Sie uns eine E-Mail. Wir freuen uns auf Ihre Nachricht!

inovex Events

Hier geht's zu unseren aktuellen Messen, Konferenzen und Meetups.

Zur Event-Liste

inovex Blog

J. Fahnenbruck I 22.03.2018

Is React Native an Alternative to Native Development?

Blog-Artikel lesen

inovex Trainings

React Training

Die Entwicklung hin zu immer mächtigeren Anwendungen, die direkt im Browser ausgeführt werden, macht die Verwendung von Bibliotheken attraktiv, die über simple jQuery-Snippets hinausgehen.

Mehr Informationen zum Training

Aktuelle News über inovex und die Branche

inovex Newsletter

Jetzt hier anmelden!

Arbeiten bei inovex

inovexperts erzählen ...

Was es konkret im Alltag bedeutet, bei inovex als „inovexpert“ zu arbeiten, erklären die Kolleginnen und Kollegen in unseren inovexpert-Videos. Wir wünschen viel Spaß beim Ansehen!

Jetzt inovexperts-Videos ansehen

inovex Blog

J. Reuter, F. Müller, J. Böhler I 28.05.2018

Komponentenbibliotheken für die Web-Entwicklung

Blog-Artikel lesen