Low-Code-Anwendungen als Zukunft für die Softwareentwicklung?
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
