BackstopJS entmystifiziert

Ein Wissenschaftler kann mit einem Nobelpreis für einen erstaunlichen wissenschaftlichen Durchbruch in seiner Forschung ausgezeichnet werden. Meistens wird der führende Wissenschaftler bei der Forschung von einem Team hochbegabter Assistenten unterstützt.

Apropos Unterstützung: Man braucht auch in der digitalen Landschaft etwas, das einen auffängt. Wenn Sie eine Änderung an Ihrer Website vornehmen, müssen Sie sicher sein, dass diese keine unbeabsichtigten Nebenwirkungen hat. Hier kommt BackstopJS ins Spiel. Als intuitives Tool ermöglicht es eine schnelle Konfiguration und hilft Ihnen, schnell in Gang zu kommen. Bevor wir uns ansehen, wie es mit Drupal genutzt werden kann, wollen wir tiefer in das visuelle Regressionstesten und BackstopJS eintauchen.

Visuelles Regressionstesten und BackstopJS

Das visuelle Regressionstesten konzentriert sich auf die Identifizierung visueller Veränderungen zwischen Iterationen oder Versionen einer Website. Dabei werden Referenzbilder für jede Komponente erstellt, sobald sie erstellt werden, was den Vergleich im Laufe der Zeit zur Überwachung von Veränderungen ermöglicht. Entwickler können diesen Test in ihrer lokalen Entwicklungsumgebung durchführen, nachdem die Änderungen vorgenommen wurden, um sicherzustellen, dass aufgrund der Änderungen keine Regressionsprobleme auftreten.

Das visuelle Regressionstesten konzentriert sich auf die Identifizierung visueller Veränderungen zwischen Iterationen oder Versionen einer Website.

Das visuelle Regressionstesten ist äußerst vorteilhaft, da es den Entwicklern eine Testabdeckung ermöglicht, die größer ist als das, was sie manuell tun könnten, wodurch sichergestellt wird, dass Änderungen keine Regressionsauswirkungen auf andere Komponenten haben. Es bietet eine detailliertere Vergleichsmöglichkeit als bei der manuellen Überprüfung der Website. Auch ohne ein vollständiges Verständnis des Projekts wissen die Entwickler, wie die Website vor den Änderungen aussehen sollte.

BackstopJS, ein Open-Source-Projekt, ist ein großartiges Werkzeug für die Durchführung visueller Regressionstests. Es wird für die Durchführung visueller Tests mit Hilfe von Headless-Browsern verwendet, um Screenshots zu erstellen. Es wurde von Garris Shipon entwickelt und lief ursprünglich mit Hilfe der Headless-Browser-Bibliotheken PhantomJS oder SlimerJS. Es unterstützt das Screen-Rendering mit Chrome-headless und Sie können Ihre eigenen Interaktionen mit Hilfe von Puppeteer- und ChromyJS-Scripting hinzufügen.

BackstopJS wird für die Durchführung visueller Tests mit Hilfe von Headless-Browsern verwendet, um Screenshots zu erstellen.

Es bietet ein ausgezeichnetes Vergleichswerkzeug zur Identifizierung und Hervorhebung von Unterschieden und ermöglicht es Ihnen, mehrere Breakpoints für das Testen von responsiven Websites einzurichten. Darüber hinaus verwendet es einfache CSS-Selektoren, um zu identifizieren, was erfasst werden soll. Es bietet eine In-Browser-Reporting-Benutzeroberfläche wie ein anpassbares Layout, Szenario-Display-Filterung usw. Darüber hinaus verfügt es über ein integriertes Docker-Rendering und funktioniert hervorragend mit Continuous Integration und Source Control. Außerdem bietet es Ihnen CLI- und JUnit-Berichte.

Workflow und Installation

Es ist ziemlich einfach, BackstopJS zu installieren und zu konfigurieren, was Folgendes beinhaltet:

Installation (global): npm install -g backstopjs
Installation (lokal): npm install --save-dev backstopjs
Konfiguration: backstop init (erstellt backstop.json Vorlage)

Im Folgenden wird der Workflow von BackstopJS dargestellt:

• backstop init: Eine neue BackstopJS-Instanz wird eingerichtet, indem URLs, Cookies, Bildschirmgrößen, DOM-Selektoren, Interaktionen usw. angegeben werden.
• backstop test: Durch die Erstellung einer Reihe von Test-Screengrabs und den Vergleich mit Ihren Referenz-Screengrabs können Sie die Änderungen überprüfen, die in einem visuellen Bericht angezeigt werden.
• backstop approve: Wenn nach dem Test alles in Ordnung ist, können Sie ihn genehmigen.

BackstopJS mit Drupal

Auf einer Drupal Community-Veranstaltung im Jahr 2018 wurde ein Drupal 8-Modul namens Backstop Generator vorgestellt, mit dem backstop.json-Konfigurationsdateien auf der Grundlage der eindeutigen Inhalte der Website erstellt werden können.

Dieses Drupal 8-Modul stellt ein administratives Konfigurationsformular zur Verfügung, um ein BackstopJS-Profil für visuelle Tests auf der Grundlage des Inhalts der Drupal-Website zu erstellen. Es unterstützt Sie bei der Erstellung von Backstop-Szenarien aus Drupal-Seiten und bei der Definition von zufälligen Seiten, die als Szenarien aufgenommen werden sollen. Sie können Viewport-Größen ein- und ausschalten. Das Ergebnis ist eine backstop.json-Datei, die Sie in ein Backstop-Verzeichnis einfügen müssen, wodurch die vorhandene backstop.json-Datei ersetzt wird. Es benötigt die Dienste der Module Serialisierung, HAL und REST. Es ist erwähnenswert, dass dieses Modul nicht durch die Sicherheitsrichtlinie von Drupal abgedeckt ist.

Backstop Generator kann noch viel mehr. Sie können dazu beitragen, weitere interessante Funktionen zu entwickeln und sich der Issue Queue auf Drupal.org anschließen, um einen Patch einzureichen oder einen Fehler zu melden.

Fazit

Das Deployment von Frontend-Änderungen kann problematisch sein. Visuelle Regressionstest-Software wie BackstopJS stellt sicher, dass unsere Änderungen korrekt und enthalten sind und kann für Drupal-Sites von großem Nutzen sein.

Wir bieten eine Reihe von Dienstleistungen an, um digitale Unternehmen bei der Verwirklichung ihrer Träume von der digitalen Transformation zu unterstützen.

Kontaktieren Sie uns unter [email protected] und teilen Sie uns mit, wie wir Teil Ihrer digitalen Transformationspläne sein können.