Ein tiefer Einblick in CSS Testing: Ein Developer’s Complete Guide

Wenn es um Front-End-Tests geht, werden CSS-Tests oft übersehen. Es gibt zweifellos erhebliche Herausforderungen beim CSS-Testen, aber das bedeutet nicht, dass es als unwichtiges Werkzeug in einer allgemeinen Teststrategie abgetan werden sollte. In diesem Beitrag bieten wir Ihnen eine Anleitung zu dieser Form des Testens, damit Sie die Beweggründe für die Verwendung verstehen und die praktischen Schritte für den Einstieg kennen.

Wir eröffnen den Beitrag mit den grundlegenden Fragen:

• Was sind CSS-Tests?
• Warum sollten Sie sich darum kümmern??
• Wie testet man CSS?

Sobald wir die Grundlagen aus dem Weg geräumt haben, werden wir Sie durch eine Liste einiger der wichtigsten CSS-Testwerkzeuge führen. Sie werden mehr über die verschiedenen Werkzeuge und Werkzeugkategorien in diesem Bereich erfahren.

Bevor wir einpacken, werden wir einige abschließende Gedanken teilen, einschließlich, wie Testim Automate einige der Hindernisse umgehen kann, die CSS bei automatisierten End-to-End-Tests auferlegt.

Kommen wir zur Sache.

CSS Testing Basics

Beginnen wir mit der Beantwortung der grundlegenden Fragen.

Was sind CSS-Tests?

CSS Testing ist, wie der Name schon sagt, der Prozess des Testens Ihrer Stylesheets. Genauer gesagt beziehen wir uns auf automatische CSS-Tests. Schließlich ist dies 2021 und Testautomatisierung ist unerlässlich. Dies gilt für alle Ebenen, Ebenen und Formen des Testens. CSS-Tests sind keine Ausnahme.

Warum sollten Sie sich für CSS-Tests interessieren?

CSS ist Mitglied der Web-Trifecta (HTML, CSS und JavaScript). Daher ist es für die Qualität einer Webanwendung von entscheidender Bedeutung. Probleme in CSS führen dazu, dass die Web-App / Website nicht korrekt gerendert wird.

Die Benutzeroberfläche ist ein besonders sensibler Bereich einer Anwendung, wenn es um die Benutzererfahrung geht. Schließlich ist die Benutzeroberfläche das, was der Benutzer sieht und berührt — im Falle von Mobiltelefonen im wahrsten Sinne des Wortes.

Daher sollten CSS-Tests ein entscheidender Bestandteil des UI-Tests sein, wenn Ihre Organisation es ernst meint, ihren Benutzern eine angenehme Benutzererfahrung zu bieten.

Wie testet man CSS?

Sie können CSS auf verschiedene Arten testen. Das liegt daran, dass CSS-Tests keine einzige Sache sind; Stattdessen kommt es in verschiedenen Typen. Die vier Haupttypen sind:

• Regression
• Syntax
• Projekt
• Referenz

Lassen Sie uns nun jeden dieser Typen behandeln.

Regression

Regressions-CSS-Tests sind die gleichen alten Regressionstests, die auf CSS angewendet werden. Regressionstests sind weniger eine Art von Tests – wie Unit-Tests oder End-to-End—Tests – als vielmehr eine Strategie. Es besteht darin, eine Testsuite einzurichten, um Regressionen oder Fehler nach Änderungen an der Codebasis zu erkennen.

CSS-Regressionstests überprüfen also, ob Sie Ihren Seitenstil nach dem Ändern der Seite nicht ändern.

Syntax

Diese Kategorie bezieht sich auf Testtechniken und Tools, die die korrekte CSS-Syntax überprüfen. Kurz gesagt, es ist wie ein Linter für CSS.

Projekt

Die Kategorie “Projekt” bedeutet zu überprüfen, ob das CSS die Standards des Projekts und der Organisation einhält.

Referenz

Schließlich überprüft der Referenz-CSS-Test, ob die implementierte und gerenderte Seite so aussieht, wie sie aussehen sollte. In diesem Bereich wurden große Fortschritte erzielt, und die Dinge sind viel besser als im dunklen Zeitalter der Dominanz des Internet Explorers.

Das bedeutet jedoch nicht, dass es keine Herausforderungen mehr gibt. Obwohl viele der wichtigsten Browser von heute eine gemeinsame Grundlage haben – den Chromium Open-Source-Browser -, werden Sie wahrscheinlich Schwierigkeiten haben, sicherzustellen, dass Ihre Seite in mindestens den am häufigsten verwendeten Browsern gleich aussieht und sich gleich verhält.

CSS-Testtools: Hier sind einige der wichtigsten

Wir führen Sie durch einige der verfügbaren Tools, die Sie möglicherweise ausprobieren möchten.

Wie bereits erwähnt, ist CSS-Testen ein oft übersehener Bereich beim Testen. Eine der Auswirkungen davon ist die geringere Anzahl verfügbarer Tools im Vergleich zu anderen Arten von Tests.

CSS Lint

CSS Lint ist genau das, was der Name schon sagt: ein Linter für CSS-Code. Sie können auf der Website darauf zugreifen oder es als npm-Paket installieren.

CSS Lint bietet Syntaxprüfung, neben der Verwendung von Regeln, um zu überprüfen, dass der Code keine Probleme enthält. Sie können auch Ihre eigenen Regeln schreiben.

BackstopJS

BackstopJS ist ein visuelles Regressionswerkzeug für Web-Apps. Dies geschieht durch den Vergleich der im Laufe der Zeit aufgenommenen Screenshots. Sie können es einfach mit npm installieren:

BackstopJS rendert Tests mit kopflosem Chrome und kann Benutzerinteraktionen mithilfe von Puppenspieler-Skripten simulieren. Sie können es zu Ihrem CI hinzufügen und es wird mit integriertem Docker-Rendering geliefert.

Quixote

Quixote ist Unit- und Integrationstest für CSS. Mit dieser Bibliothek können Sie überprüfen, wie HTML-Elemente vom Browser gerendert werden, und überprüfen, wie Elemente miteinander in Beziehung stehen. Quixote funktioniert in modernen Desktop- und mobilen Browsern, aber Sie können auch ein Tool wie Karma verwenden, um Quixote-Tests in mehreren Browsern auszuführen.

Sie können dieses Tool über npm installieren:

CSSCritic

CSS Critic ist ein Tool zum automatischen Regressionstest von CSS.

Es funktioniert, indem der aktuelle Status Ihres Layouts mit einem von Ihnen bereitgestellten Referenzbild verglichen wird. Wenn sich das Layout ändert, schlagen die Tests fehl.

Sie können CSS-Kritik mit npm erhalten:

Eine wichtige Einschränkung ist, dass CSSCritic nur in Firefox und Chrome funktioniert.

Fazit

CSS-Tests sind eine oft übersehene Form des Testens. Was leider Sinn macht, da CSS immer eine Art hässliches Entlein der Web-Trifecta war.

Da sich CSS—Fehler jedoch sicherlich auf die Benutzeroberfläche einer Web—App auswirken – was sich wiederum negativ auf die Benutzererfahrung auswirkt – ist das Testen Ihrer Stylesheets von größter Bedeutung, wenn Sie Ihren Besuchern eine großartige Benutzererfahrung bieten möchten.

In diesem Beitrag haben wir die Grundlagen des CSS-Tests gesehen: Was es ist, warum es wichtig ist und wie Sie es tun. Wir haben Sie auch durch einige der wichtigsten Tools geführt, die verschiedene Kategorien abdecken: Linters, Komponententests, Regressionstests und visuelle Regressionstests. Sie wissen jetzt mehr über das Konzept des CSS-Tests und die Ihnen zur Verfügung stehenden Werkzeuge.

Vor dem Abschluss noch ein letzter Gedanke: CSS ist wichtig, und zwar nicht nur im Zusammenhang mit CSS-Tests. Es ist auch wichtig für andere Arten von Tests.

Zum Beispiel verwenden End-to-End-Testtools häufig CSS-Klassennamen als Bezeichner. Leider kann das ein fragiler Ansatz sein. Es ist üblich, dass Entwickler Techniken verwenden, die zufällige Bezeichner an ihre CSS-Klassen anhängen. CSS-Module sind ein Beispiel für einen solchen Ansatz.

Der Einsatz solcher Techniken führt oft zu fragilen Tests. Viele Tools verlassen sich auf Klassennamen, um Elemente im DOM zu finden. Wenn sich Klassennamen ändern, schlagen Tests fehl, was zu einer starken Testwartung führt.

Es gibt jedoch bessere Ansätze. Zum Beispiel hat Testim kürzlich eine Funktion namens Locator Filtering and Mapping hinzugefügt. Es ermöglicht Testim, den dynamischen Teil von Klassennamen zu filtern, wenn Locators für jedes Element bestimmt werden. Dies verbessert die Locator-Genauigkeit und ermöglicht robustere Testfälle. Probieren Sie Testim aus und filtern Sie es. Viel Spaß beim Testen!