Wenn Sie Ihrer Website neuen Code hinzufügen, ist es wichtig sicherzustellen, dass danach alles noch ordnungsgemäß funktioniert. Testen Sie die neue Funktionalität hilft Ihnen sicherzustellen, dass während des Vorgangs nichts schief gelaufen ist. Sie sollten jedoch auch sicherstellen, dass alle designbezogenen Änderungen reibungslos umgesetzt wurden.
Hier kommen visuelle Regressionstest-Tools ins Spiel. Sie können Ihnen dabei helfen, zu bestätigen, dass Ihre Webseiten nach Änderungen an Ihrem Site-Code immer noch so aussehen, wie sie sollten. Verwendung dieser Art von Werkzeugen minimiert Risiken im Zusammenhang mit WordPress-Updates sowie benutzerdefinierten Änderungen.
In diesem Beitrag erklären wir, was visuelle Regressionstests sind und wie sie funktionieren. Dann werden wir präsentieren vier visuelle Regressionstest-Tools Sie können versuchen, loslegen!
In diesem Artikel 🔍
Was ist der visuelle Regressionstest? 🧐
Wenn Sie Änderungen an Ihrer WordPress-Site vornehmen, besteht immer das Risiko, dass das Update dazu führt unerwünschte Änderungen auf die Funktionalität und / oder Gestaltung seiner Seiten. Der neue Code kann sich auf die Art und Weise auswirken, wie Elemente zuvor ausgesehen und bearbeitet wurden.
Einfach ausgedrückt ist der visuelle Regressionstest eine Form von Identifizierung von Sehstörungen auf Ihren Webseiten. Es kann Ihnen dabei helfen, sicherzustellen, dass Ihre WordPress-Updates und -Modifikationen Ihre Layouts und Layouts nicht zerstören.
Visueller Regressionstest. Dabei werden Screenshots Ihrer Webseiten aufgenommen und mit den ursprünglichen Referenzversionen verglichen (das Ergebnis wird häufig als “diff” bezeichnet). Der Zweck besteht darin, Abweichungen zwischen den Versionen festzustellen, damit Sie unerwünschte Unstimmigkeiten schnell beheben können.
Dies ist besonders wichtig, wenn es um mobiles und responsives Design geht. Angenommen, jemand versucht, eine Seite auf Ihrer Website von seinem Mobilgerät aus zu verwenden. Sie haben jedoch aufgrund überlappender Texte oder Bilder Schwierigkeiten, die Seite zu lesen oder zu navigieren. Dies wird natürlich die Benutzererfahrung (UX) und frustrieren kann Ihre Absprungrate erhöhen den Besucher wegfahren.
Visuelle Regressionstests helfen Ihnen, solche Probleme zu vermeiden. Darüber hinaus können Sie die verbessern Benutzeroberfläche oder Benutzeroberfläche (UI) von Ihrer WordPress-Website.
Der visuelle Regressionstest beinhaltet im Wesentlichen Screenshots aufnehmen und vergleichen. Während Sie dies manuell tun, ist dies keine sehr effiziente Methode. Im Gegensatz dazu können Sie durch automatisierte Tests viel Zeit sparen.
Tools zum Testen der visuellen Regression. präsentieren einen alternativen und automatisierten Ansatz zum Testen von Webseiten. Sie werden über eine Site oder Anwendung ausgeführt, machen Screenshots und vergleichen Versionen, um sicherzustellen, dass jede Seite in verschiedenen Browsern korrekt angezeigt wird.
Darüber hinaus untersuchen diese Tools nicht nur die gesamte Seite, sondern auch bestimmte Blöcke und Elemente. Wenn Sie beispielsweise einer Webseite einen Textblock hinzufügen, stellen visuelle Regressionstests nicht nur sicher, dass der Text sichtbar ist. Außerdem können Sie sicherstellen, dass der Text angezeigt wird genau so soll es aussehen.
Darüber hinaus können Sie mit diesen Testtools auch die subtilsten Änderungen erkennen, einschließlich feine Details und Pixelpegelunterschiede. Angenommen, eine Änderung führt dazu, dass die Schriftgröße einer CTA-Schaltfläche (Call-to-Action) nur um wenige Pixel erhöht wird. Dies ist etwas, das Sie wahrscheinlich nicht selbst erkennen würden.
Wenn Sie jedoch ein Tool zum Testen der visuellen Regression verwenden, wird ein Screenshot der neuen Seite und erstellt Vergleiche es mit dem Original oder Referenzversion. Wenn Änderungen vorgenommen werden, wird genau hervorgehoben, was anders ist, sodass Sie bei Bedarf Maßnahmen ergreifen können.
Nachdem Sie nun besser verstanden haben, was visuelle Regressionstests sind und wofür sie verwendet werden, ist es an der Zeit, einige der Tools zu untersuchen, die dies können erledige die Arbeit für dich. Die vier visuellen Testwerkzeuge, die wir vorstellen werden, sind:
- Screenster
- Geist
- PhantomCSS
- BackstopJS
1. Screenster
Wenn Sie nach einem suchen webbasiertes visuelles Regressionstest-Tool Screenster ist eine Codierung wert, die keine Codierung erfordert:
Dieses Tool kombiniert Screenshots mit DOM- und CSS-Prüfungen. Die Algorithmen führen Vergleichstests durch und erkennen automatisch visuelle Änderungen in Ihren Inhalten. Verwenden Sie intelligente Selektoren, um Elemente auf der Seite zu identifizieren, die verschoben oder geändert wurden. Darüber hinaus sind keine Installationen oder ein Browser-Plug-In erforderlich.
Zusätzliche Funktionen umfassen:
- Codierte und No-Code-Tests
- Lokale und Offline-Tests
- Automatische Erkennung und Vergleichsumschaltung
- Die Option, dynamischen Inhalt zu ignorieren
Um loszulegen, können Sie sich für ein kostenloses Konto anmelden. Sie können auch aus mehreren Premium-Plänen und -Paketen auswählen, je nach Ihren spezifischen Anforderungen. Da es sich um ein webbasiertes Tool handelt, können Sie es auch online testen, indem Sie nur Ihre E-Mail-Adresse verwenden. Von dort aus können Sie Erstellen Sie einen Test::
Screenster zeichnet Ihre Aktionen auf und verwendet die Ergebnisse als visuelle Basis. ZU Erfahren Sie mehr über die Verwendung von Screensterkönnen Sie ihre Dokumentations- und Support-Seite besuchen.
2. Wraith
Wraith ist ein Screenshot-Vergleichstool entwickelt vom BBC News Team:
Dieses visuelle Testtool verwendet einen kopflosen Browser, um Screenshots von Webseiten in verschiedenen Umgebungen zu vergleichen, von Live-Websites bis hin zu Staging- und Testplattformen. Es kann besonders nützlich sein für Verfolgung von zwei Websites gleichzeitigund Testen von Websites mit dynamischem Inhalt über einen “Erfassungsmodus”. Sie können es auch verwenden, um Seiten auf einer Website im Laufe der Zeit zu vergleichen.
Zusätzliche Funktionen umfassen:
- Auflösungsvariation
- Haltepunkttest
- Test der Seitenreaktivität
Wraith macht Screenshots Ihrer Webseiten und dann einen Vergleich zwischen ihnen machen. Sie erhalten ein Paket mit einer PNG-Diff-Datei mit den Bildvergleichen (Änderungen werden blau hervorgehoben). Es enthält auch eine Datei, mit der Sie wissen, wie viel Prozent der Pixel sich geändert haben.
Im Gegensatz zu Screenster benötigt Wraith Installation und Scripting um es zu benutzen. Es gibt auch einige Voraussetzungen, die Sie benötigen, darunter:
Pantheon bietet hilfreiche Anleitungen zu mit Wraith für visuelle Regressionstests. Weitere Informationen finden Sie auch in der Setup- und Installationsdokumentation von Wraith.
3. PhantomCSS
PhantomCSS ist ein weiteres kostenloses Tool zum Testen der visuellen Regression. Sie können PhantomCSS für grundlegende visuelle Tests verwenden und reaktionsschneller Designtest. Es ist eine großartige Option, wenn Sie sich mit JavaScript auskennen.
PhantomCSS läuft weiter CasperJS, PhantomJS und Resemble.js. CasperJS erfasst die Screenshots, und PhantomCSS verwendet dann Resemble.js, um die Screenshots mit den Basisbildern zu vergleichen. Findet Pixelunterschiede und erstellt Bildunterschiede, auf die Sie verweisen können.
Es gibt verschiedene Möglichkeiten, dies zu tun Installation und Verwendung von PhantomCSS. Eine der einfachsten Optionen ist jedoch die Verwendung des Grunt-Plugins:
Zusammen können PhantomCSS und Grunt machen Integration und Automatisierung visueller Regressionstests einfacher. Um PhantomCSS und Grunt verwenden zu können, müssen Sie zuerst Grunt installieren und eine Grunt-Datei erstellen. Anschließend können Sie das Grunt-Plugin installieren und die PhantomCSS-Task laden.
Auf den ersten Blick scheint dies ein langwieriger und komplizierter Prozess zu sein, insbesondere wenn Sie Grunt noch nie zuvor verwendet haben. Einer der Vorteile der Verwendung von PhantomCSS ist jedoch die große Anzahl von Anleitung, Tutorials und Support verfügbar für die Verwendung. Es gibt es schon eine Weile, daher gibt es eine Quelle für Ressourcen und Informationen zu GitHub, die Sie überprüfen können.
4. BackstopJS
Zu guter Letzt können Sie BackstopJS verwenden, um visuelle Regressionstests für zu automatisieren reaktionsschnelle Websites und Apps::
BackstopJS ermöglicht es Ihnen Vergleichen Sie DOM-Screenshots im Laufe der Zeit. Erstellen Sie Screenshots von Webseiten in mehreren Bildschirmgrößen, um sie als Referenz zu verwenden. Sie können sie verwenden, um Regressionen zu finden, die nach dem Ändern des CSS Ihrer Site möglicherweise vorhanden sind.
Wie PhantomCSS verwendet auch BackstopJS Resemble.js, CasperJS und PhantomJS (oder SlimerJS). Zusätzliche Funktionen umfassen:
- Filterung der Szenariovisualisierung
- Ein visueller Differenzprüfer
- CLI-Berichte
- Chrome Headless-Rendering
Einer der Hauptvorteile von BackstopJS ist wie einfach zu bedienen ist. Um zu beginnen, müssen Sie nur das globale npm-Installationsprogramm ausführen. Von dort aus können Sie Ihr Projektverzeichnis suchen und Backup Init ausführen.
Um einen Test auszuführen, verwenden Sie den Sicherungstest aus dem Stammverzeichnis. Um eine Reihe von Änderungen zu genehmigen, können Sie die Sicherungsgenehmigung verwenden. durch weitere Anleitung und AnleitungSchauen Sie sich die BackstopJS-Seite auf GitHub an.
Ende 💡
Wenn Sie das tun Updates für Ihre WordPress-WebsiteEs ist wichtig zu überprüfen, ob die Änderungen nichts beschädigen. Dies bedeutet, dass sowohl die Funktionalität als auch das Design der Website intakt sind.
In diesem Beitrag haben wir gesehen vier visuelle Regressionstest-Tools Sie können für WordPress-Updates ohne Risiko verwenden:
- Screenter: Ein webbasiertes visuelles Vergleichstool, das Screenshots mit DOM- und CSS-Prüfungen kombiniert (ohne dass eine Codierung erforderlich ist).
- Geist: Ein nützliches Tool zum Testen und Vergleichen von Websites mit dynamischen Inhalten.
- PhantomCSS: Ein kostenloses visuelles Regressionstest-Tool, das ideal ist, wenn Sie JavaScript gut kennen.
- BackstopJS: Automatisieren Sie visuelle Regressionstests für reaktionsfähige Websites und Apps.
Möchten Sie Ihre Meinung äußern oder sich an der Unterhaltung beteiligen? Fügen Sie Ihre Kommentare hinzu 🐦 in Twitter.
