Wie wir die Qualität Ihrer Akademie durch visuelle Regressionstests erhalten

Kürzlich haben wir unsere neue Akademie-Schnittstelle eingeführt. Während der Entwicklung haben wir begonnen, einige neue Techniken anzuwenden, die uns helfen, unsere Arbeitsabläufe zu verbessern und einen hohen Qualitätsstandard für unser Produkt aufrechtzuerhalten. Wir verhindern Fehler, indem wir komponentenorientiert arbeiten und häufig auf unbeabsichtigte visuelle Änderungen (visuelle Regressionen) testen.

Komponentengesteuerte Entwicklung

In den letzten Jahren war ein großer Trend in der Entwicklung von Benutzeroberflächen die komponentenorientierte Entwicklung (CDD). Komponenten sind die kleinsten Teile in sich geschlossener Funktionalität, die für sich genommen einen Mehrwert darstellen. CDD macht sich dies zunutze, indem es einen Build-Prozess schafft, der von unten nach oben arbeitet. Sie erstellen zunächst kleine Komponenten, die in größere Komponenten eingebunden werden, die zusammen eine Funktion oder eine Seite bilden. Stellen Sie sich das so vor, als ob ein Fahrrad aus kleineren Teilen bestünde. Sie beginnen mit zwei Rädern, dann folgt ein Rahmen. Fügen Sie ein Lenkrad, einige Pedale und eine Kette hinzu. Jetzt sieht es schon wie ein Fahrrad aus. Auf diese Weise haben wir auch die Benutzeroberfläche der Akademie entwickelt.

Die komponentenorientierte Arbeitsweise bringt zahlreiche Vorteile mit sich:

• Komponenten sind wiederverwendbar. Wenn du ein Rad baust, kannst du es verwenden, um ein größeres oder kleineres Fahrrad zu bauen, oder vielleicht sogar ein Dreirad.

• Kleine Komponenten sind leicht zu verstehen.

• Komponenten sind leicht zu testen. Sie können testen, ob das Rad funktioniert, Sie müssen sich noch keine Gedanken über das ganze Fahrrad machen.

• Die Arbeit mit Komponenten beschleunigt oft unseren Entwicklungsprozess, da sie Plug-and-Play-Lösungen bieten.

• Die Entwicklung ist zielgerichtet. Es ist einfach, den Überblick über Komponentenvariationen zu behalten.

• Es gibt Tools, mit denen man leicht den Überblick über alle verfügbaren Komponenten behält, die von Kollegen erstellt wurden.

Einige Beispiele für Komponenten, die wir erstellt haben, sind: eine Schaltfläche, ein Pop-up-Fenster, eine Multiple-Choice-Antwort und auch eine vollständige Anmeldeseite.

Storybook ermöglicht uns die Entwicklung von Komponenten außerhalb unserer Anwendung in einer isolierten Umgebung, ohne dass wir uns Gedanken über Abhängigkeiten oder die Beeinträchtigung der Anwendung machen müssen.

Die Geschichte unserer Schnittstelle in Storybook

Nachdem wir viele Komponenten erstellt haben, die das Rückgrat unserer Schnittstelle bilden, organisieren wir sie in Storybook. Storybook ist ein Komponenten-Explorer oder eine Komponentenbibliothek. Es ist ein effizienter Weg, um den Überblick über alle unsere Komponenten zu behalten. Jede Komponente erhält ihre eigene Geschichte in Storybook, in der alle möglichen Variationen einer Komponente angezeigt werden können: 

Schaltflächenkomponente im Storybook

Bei einer Schaltflächenkomponente ist es zum Beispiel möglich, eine Standardschaltfläche, eine erhöhte Schaltfläche, eine nicht erhöhte Schaltfläche und eine deaktivierte Schaltfläche anzuzeigen. Es ist auch möglich, mit der Komponente zu interagieren, um zu sehen, wie sich dadurch der Zustand oder das Verhalten der Komponente ändert. Geben Sie zum Beispiel etwas in das Anmeldeformular ein, und die Eingabefelder zeigen Ihnen an, ob die Eingabe gültig ist:

Anmeldeformular-Komponente in Storybook

Storybook ermöglicht uns die Entwicklung von Komponenten außerhalb unserer Anwendung in einer isolierten Umgebung, ohne dass wir uns Gedanken über Abhängigkeiten oder die Beeinträchtigung der Anwendung machen müssen.

Wir verwenden Storybook als Designwerkzeug, da wir eine geschichtenorientierte Designstrategie verfolgen. Wenn wir entwerfen, schaffen wir direkt etwas, das wertvoll ist. Anstelle von verschwenderischen Photoshop-Bearbeitungen, wie wir sie früher gemacht haben. Wenn wir Storybook Komponentengeschichten hinzufügen, tragen wir automatisch zu einem lebenden Styleguide oder einer Benutzeroberflächenbibliothek bei. Das bedeutet, dass ein Entwickler einfach aus einer breiten Palette vorgefertigter Komponenten auswählen kann, um sie zu einer Funktion hinzuzufügen, die er gerade erstellt. Dadurch ist unsere Schnittstelle konsistent und relativ kostengünstig zu entwickeln:

Komponente der Anmeldeseite im Storybook

Mit Hilfe von Add-ons haben wir Storybook erweitert, so dass wir die Zugänglichkeit der einzelnen Komponenten testen können. So stellen wir sicher, dass die Schnittstelle für Benutzer mit bestimmten Einschränkungen zugänglich bleibt:

Überprüfung der Zugänglichkeit in Storybook

Visuelle Regressionstests mit Percy

Wir haben bereits über visuelle Regressionen als unbeabsichtigte visuelle Veränderungen gesprochen. Um diese visuellen Veränderungen zu erkennen, verwenden wir ein Tool namens Percy. Percy ist ein Tool für visuelle Regressionstests, das sich ausschließlich um die visuelle Integrität kümmert.

Mit Storybook kann ich Komponenten isoliert erstellen und gestalten, und ich habe immer einen Überblick über die verschiedenen Szenarien, die ich entworfen habe. Mit Hilfe von Percy weiß ich immer, welche Auswirkungen die Änderungen haben, die ich vornehme.
Anouk
Front-End Developer & UX Designer

Für jede Komponente, die wir in unserer Storybook-Komponentenbibliothek entwickelt haben, wird ein Bildschirmfoto erstellt. Wenn wir eine Komponente ändern, wird ein neuer Screenshot erstellt, und die beiden werden nebeneinander verglichen. Die Unterschiede werden dann rot markiert, um deutlich zu zeigen, was sich geändert hat:

Regressionen in Percy sichtbar gemacht

Die Unterschiede zwischen der alten und der neuen Version sind in rot markiert

Percy ist direkt mit unserer kontinuierlichen Integrationspipeline (dem Fluss von der Idee zur Realität) verbunden, indem er uns über visuelle Regressionen informiert, bevor die Änderungen live gehen. Nach einer Überprüfung durch einen der Designer werden die Änderungen entweder angenommen oder abgelehnt. Percy ermöglicht auch eine Diskussion über eine bestimmte Änderung:

Percy hat sich in unsere Pipeline integriert, um uns zu sagen, dass etwas überarbeitet werden muss

All dies hilft uns, unerwünschte visuelle Änderungen davon abzuhalten, ihren Weg zu Ihnen, unseren Endbenutzern, zu finden. Hat sich ein visueller Fehler trotzdem eingeschlichen? Lesen Sie weiter, um herauszufinden, wie wir in diesem Fall vorgehen