Visuelle Regressionstests in WordPress leicht gemacht

Letzte Woche rief mich ein Freund, der mehrere WordPress Websites verwaltet, in Panik an. Ein routinemäßiges Plugin-Update hatte das Navigationsmenü seines Kunden beschädigt, aber er bemerkte es erst, als die Kunden sich zu beschweren begannen.

Dies ist ein häufiges Problem, das ich unzählige Male gesehen habe, und genau deshalb sind visuelle Regressionstests für WordPress-Website-Betreiber so wichtig.

Visuelle Regressionstests mögen kompliziert klingen. Tatsächlich ist es aber eine einfache Lösung, die Ihnen stundenlange manuelle Überprüfungen erspart und peinliche Layout-Probleme verhindert.

In der Regel werden automatisch Vorher-Nachher-Screenshots Ihrer Seiten verglichen. Auf diese Weise lassen sich selbst kleinste visuelle Änderungen erkennen, die das Erscheinungsbild Ihrer Website beeinträchtigen könnten. 🔍

In diesem Leitfaden zeige ich Ihnen, wie Sie visuelle Regressionstests auf Ihrer WordPress Website durchführen können. Nach dem Testen zahlreicher Werkzeuge und Methoden habe ich die zuverlässigste Lösung gefunden, die keine Programmierkenntnisse oder technisches Fachwissen erfordert.

Was sind visuelle Regressionstests, und warum sind sie wichtig? 🤔

Jedes Mal, wenn Sie Ihre Website aktualisieren – sei es ein WordPress-Core-Update, ein neues Plugin, eine Theme-Änderung oder nur eine kleine Code-Änderung – besteht die Möglichkeit, dass etwas im Frontend nicht mehr an seinem Platz ist.

Zum Beispiel könnte ein Button verschwinden, Ihr Layout könnte kaputt gehen oder ein Produktbild könnte nicht mehr richtig geladen werden.

Das Problem dabei? Diese visuellen Fehler bleiben oft unbemerkt, bis ein Besucher über ein Kontaktformular oder eine Befragung zum Design-Feedback auf sie hinweist.

Bis dahin könnte der Schaden für die Benutzer Ihrer Website bereits angerichtet sein.

Hier kommen die visuellen Regressionstests ins Spiel.

Das Verfahren ist einfach: Machen Sie Schnappschüsse Ihrer Seiten vor und nach einer Aktualisierung und vergleichen Sie sie dann, um Änderungen zu erkennen.

Und wenn Sie auf einer Staging Website testen (was wir empfehlen), können Sie gefahrlos Aktualisierungen vornehmen und Vergleiche durchführen, um visuelle Probleme zu erkennen, bevor irgendetwas live geht.

Die gute Nachricht? Sie müssen dies nicht manuell tun.

Mit Werkzeugen für visuelle Regressionstests wie VRTs, Percy oder BackstopJS können Sie Screenshot-Vergleiche automatisieren und prüfen, wie Ihre Website in verschiedenen Ansichten auf dem Desktop, dem Tablet und dem Mobiltelefon aussieht – so können Sie Layoutprobleme erkennen.

Warum ist dies für WordPress Benutzer wichtig?

Wenn Sie eine WordPress-Website verwalten, sind visuelle Regressionstests ein zeitsparendes Sicherheitsnetz. Anstatt sich nach einer Aktualisierung durch jede Seite zu klicken, erhalten Sie mit diesem Werkzeug einen visuellen Bericht darüber, was sich geändert hat – und ob es etwas ist, das Sie beheben müssen.

Es ist besonders hilfreich in vielen Szenarien, z. B. für Agenturen, die Updates für mehrere WordPress Websites durchführen, für Freiberufler, die Kunden-Websites verwalten, oder für Online-Shop-Besitzer, die sicherstellen möchten, dass die Seiten für Produkte und Kasse intakt bleiben.

Kurz gesagt, visuelle Regressionstests helfen Ihnen, frustrierende Überraschungen zu vermeiden, Zeit zu sparen und Ihre WordPress Website reibungslos am Laufen zu halten.

In diesem Sinne möchte ich Ihnen zeigen, wie Sie visuelle Regressionstests in WordPress durchführen können. Hier ist ein kurzer Überblick über alle Schritte, die ich in diesem Leitfaden behandeln werde:

Schritt 1: Installieren und aktivieren Sie das Visual Regression Testing Plugin

In diesem Tutorial werde ich das VRTs Plugin verwenden, weil es einsteigerfreundlich und super einfach für visuelle Regressionstests zu verwenden ist. Egal, ob es sich um ein verschobenes Layout, einen fehlenden Button oder ein defektes Element nach einem Update handelt, VRTs hilft Ihnen, es frühzeitig zu erkennen.

So funktioniert es: Das Plugin macht Screenshots von den Seiten, die Sie auswählen. Sie können die Vergleiche dann manuell auslösen oder so planen, dass sie automatisch ausgeführt werden, wenn Sie Änderungen an Ihrer Website vornehmen, z. B. ein Plugin aktualisieren oder Ihr Theme optimieren.

Das Plugin vergleicht dann die “Vorher”- und “Nachher”-Screenshots Seite an Seite und hebt alle visuellen Unterschiede hervor.

Anstatt also jede Seite manuell zu überprüfen, erhalten Sie einen schnellen visuellen Bericht, der zeigt, was sich geändert hat und ob etwas ungewöhnlich aussieht.

Um das Plugin zu installieren, müssen Sie zunächst die Website von VRT besuchen und sich für einen Plan anmelden, indem Sie auf den Button “Get started for free” klicken.

Sie können dann einen der Pläne wählen. Der kostenlose Plan erlaubt Ihnen, bis zu 3 Seiten pro Tag auf einer Domain zu testen und tägliche Tests zu planen.

Mit den kostenpflichtigen Tarifen können Sie dagegen eine größere Anzahl von Seiten testen, manuelle Tests durchführen und automatisch visuelle Regressionstests nach WordPress-Core-, Plugin- und Theme-Updates durchführen.

Klicken Sie einfach auf “Jetzt kaufen” oder “Jetzt installieren” unter dem Plan, den Sie verwenden möchten.

Folgen Sie dann den Anweisungen, um sich auf der VRT-Website für ein Konto anzumelden und Ihre Zahlungsdaten hinzuzufügen.

Sobald Sie die Zahlung abgeschlossen haben, landen Sie auf Ihrem VRTs Dashboard, wo Sie das Plugin als .zip-Datei herunterladen können.

Gehen Sie dann einfach zu Plugins ” Add Plugin und klicken Sie auf den Upload Plugin” Button. Von hier aus können Sie das gerade heruntergeladene VRTs Plugin als .zip-Datei auswählen.

Achten Sie darauf, das Plugin nach der Installation zu aktivieren. Ausführliche Informationen finden Sie in unserem Leitfaden zur Installation eines WordPress Plugins.

Schritt 2: Konfigurieren Sie die VRTs Plugin-Einstellungen

Sobald Sie das Plugin aktiviert haben, können Sie festlegen, wann Ihre visuellen Regressionstests laufen sollen.

Gehen Sie zu VRTs ” Einstellungen in Ihrem WordPress Admin-Menü.

Hier können Sie dem Plugin mitteilen, wann es automatisch Schnappschüsse erstellen und vergleichen soll.

Hier sind die verfügbaren Optionen:

• Tests alle 24 Stunden durchführen (kostenlos) – Dies ist die Standardeinstellung. VRTs überprüfen automatisch Ihre ausgewählten Beiträge oder Seiten einmal pro Tag auf visuelle Änderungen.
• Tests nach WordPress- und Plugin-Updates durchführen (Pro) – Ideal, um Layout-Probleme, die durch Updates verursacht werden, sofort zu erkennen.
• Führen Sie Tests mit Ihren Lieblingsanwendungen durch (Pro) – Verbinden Sie VRTs mit externen Werkzeugen oder Workflows über Webhooks.
• Führen Sie Tests bei Bedarf aus (Pro) – Lösen Sie Tests manuell aus, wann immer Sie sie benötigen, direkt von Ihrem WordPress-Dashboard aus.

Sobald Sie den Auslöser ausgewählt haben, der zu Ihrem Arbeitsablauf (oder Ihrer Lizenz) passt, klicken Sie einfach auf den Button “Änderungen speichern” am unteren Rand der Seite.

Schritt 3: Neue Seiten oder Beiträge zum Test hinzufügen

Sobald Sie die Plugin-Einstellungen konfiguriert haben, können Sie auswählen, welche Seiten oder Beiträge Sie in Ihre visuellen Regressionstests einbeziehen möchten.

Wechseln wir nun auf den Tab “Tests”, auf dem Sie Ihre visuellen Tests verwalten und durchführen werden.

Von hier aus können Sie auf den Button “Neu hinzufügen” klicken. Damit können Sie Beiträge oder Seiten zum Testen auswählen.

In dem daraufhin angezeigten Popup-Fenster müssen Sie die Seiten oder Beiträge auswählen, für die Sie die visuellen Regressionstests durchführen möchten.

Klicken Sie dann auf “Neuen Test hinzufügen”, um Ihre Auswahl zu bestätigen.

Das VRTs Plugin macht einen ersten Schnappschuss von jeder ausgewählten Seite. Dieser dient als Basislinie – im Grunde eine “Vorher”-Version davon, wie Ihre Beiträge oder Seiten jetzt aussehen.

Nachdem Sie Ihren Test eingerichtet haben, werden Sie aufgefordert, die Seite zu aktualisieren, um den ersten Snapshot zu laden. Tun Sie genau das.

Wenn Sie das getan haben, finden Sie einen Link zu der Seite oder dem Beitrag, den Sie zum Testen veröffentlicht haben.

Sie werden auch sehen, dass der Status “Test” automatisch auf “Geplant” für den nächsten Tag gesetzt wird. Das liegt daran, dass die kostenlose Version von VRTs Tests nach einem 24-Stunden-Zeitplan durchführt.

Sie können auf den Link ‘Schnappschuss anzeigen’ klicken, um den ursprünglichen Screenshot zu überprüfen.

Es wird in einem neuen Tab wie diesem geöffnet:

Jetzt können Sie alle erforderlichen Änderungen an Ihrer Website vornehmen. Kommen Sie dann morgen wieder, um den Vergleich zu überprüfen und eventuelle unerwartete visuelle Probleme zu erkennen.

Schritt 4: Prüfung auf visuelle Unterschiede

Sobald der Test abgeschlossen ist und visuelle Fehler entdeckt wurden, sollten Sie eine Warnmeldung/Warnhinweis, -hinweis, -meldung auf dem Tabs der VRTs ” Runs sehen.

Einmal drinnen, können Sie bei Mauszeigerkontakt über den Lauf mit den festgestellten Änderungen fahren.

Klicken Sie dann auf den Link “Details anzeigen”, wenn dieser erscheint.

Auf der nächsten Ansicht sehen Sie eine Gegenüberstellung Ihrer Seite, die die Vorher- und Nachher-Version zeigt.

Das Plugin hebt automatisch visuelle Unterschiede hervor, so dass Sie diese schnell erkennen können:

• Layout-Verschiebungen und falsch ausgerichtete Elemente: Wenn sich Ihr Design nach einer Plugin-Aktualisierung oder einem Wechsel des Themes ändert, z. B. wenn Buttons verschoben werden oder Text umherspringt, wird VRTs dies anzeigen.
• Fehlende oder defekte Elemente: Ob es sich um ein fehlendes Bild, einen CTA Button oder ein eingebettetes Formular handelt, VRTs machen es einfach, alles zu erkennen, was unerwartet verschwindet, was besonders nützlich für eCommerce oder Landing Pages ist.
• Unerwartete Inhaltsänderungen: Das Plugin gibt auch Warnmeldungen/Warnhinweise/Warnhinweise, -links oder -bilder aus, so dass Sie unautorisierte Änderungen oder Fehler bei der Veröffentlichung erkennen können, bevor die Benutzer dies tun.

Mit dem Ziehgriff in der Mitte der Ansicht können Sie zwischen der alten und der neuen Version sliden und die genauen Änderungen visuell bestätigen.

Schritt 5: Rezensionen und Maßnahmen ergreifen

Nachdem Sie einen visuellen Regressionstest durchgeführt haben, können Sie auf der Grundlage der Ergebnisse Maßnahmen ergreifen. Hier ist, was Sie als nächstes tun können:

• Bearbeiten Sie die Seite manuell: Wenn die Änderungen geringfügig sind, können Sie die Probleme direkt durch Bearbeiten der Seite beheben, z. B. durch Anpassen des Layouts, Verschieben von Elementen oder Hinzufügen fehlender Funktionen.
• Auf ein Backup zurückgreifen: Wenn die Änderungen größer oder schwieriger zu beheben sind, können Sie die Seite mit Hilfe Ihres Website-Backups oder Versionsverlaufs auf eine frühere Version zurücksetzen. So können Sie vermeiden, dass Probleme auf Ihrer Website zurückbleiben.

FAQs zur Durchführung visueller Regressionstests in WordPress

Wenn Sie gerade erst mit visuellen Regressionstests beginnen, sind Sie nicht allein. Hier sind einige kurze Antworten auf häufige Fragen, die ich oft von WordPress-Benutzern und Entwicklern höre.

Was ist der Unterschied zwischen Snapshot-Tests und visuellen Regressionstests?

Beim Snapshot-Testing wird überprüft, ob der Code oder der Inhalt Ihrer Website unverändert bleibt, so als ob Sie eine Sicherungskopie davon speichern, wie die Dinge eigentlich sein sollten.

Visuelle Regressionstests hingegen konzentrieren sich auf das Design Ihrer Website. Dabei werden Screenshots vor und nach der Aktualisierung verglichen, um Layout-Änderungen, fehlende Elemente oder visuelle Fehler zu erkennen, die Sie vielleicht nicht sofort bemerken.

Welches ist das beste Werkzeug für visuelle Regressionstests in WordPress?

Die einfachste Option ist das Plugin VRTs – Visual Regression Tests. Es ist anfängerfreundlich, erfordert keine Programmierung und wird direkt von Ihrem Dashboard aus ausgeführt. Außerdem gibt es eine kostenlose Version, die sehr einfach zu benutzen ist.

Wie kann ich Regressionstests manuell durchführen?

Manuelle Regressionstests bedeuten, dass Sie Ihre Website durchgehen und die wichtigsten Seiten überprüfen, nachdem Sie Änderungen vorgenommen haben, z. B. ein neues Plugin installiert oder Ihr Theme aktualisiert haben.

Sie sollten sich Ihre Homepage, die Kontaktseite, den Bestellvorgang (falls vorhanden) und alle individuellen Layouts ansehen, um sicherzustellen, dass alles noch so aussieht und funktioniert, wie es soll. Das funktioniert, kann aber zeitaufwändig sein, wenn Sie eine große oder stark frequentierte Website verwalten.

Wie kann man Regressionstests beschleunigen?

Der beste Weg, um Zeit zu sparen, ist, dies zu automatisieren. Mit einem Plugin wie VRTs – Visual Regression Tests können Sie Schnappschüsse Ihrer wichtigen Seiten erstellen und sie nach einer Aktualisierung schnell vergleichen.

Sie müssen sich nicht mehr manuell durch jede Seite klicken – das Plugin übernimmt die visuelle Kontrolle für Sie.

Sie können Aktualisierungen auch zunächst auf einer Staging Website testen, damit Sie keine Probleme auf einer aktiven Website beheben müssen.

Wie kann man das Design einer WordPress-Website am besten testen?

Hier sind ein paar Tipps, um Ihr WordPress-Design zu testen:

• Verwenden Sie ein visuelles Regressionswerkzeug wie VRTs – Visual Regression Tests, um Designänderungen zu erkennen.
• Sehen Sie sich eine Vorschau Ihrer Themes und Plugins auf einer Website an.
• Testen Sie auf mehreren Ansichten (Desktop, Tablet und Handy).
• Verwenden Sie Werkzeuge für die Browserentwicklung, um zu prüfen, wie Ihre Website in verschiedenen Viewports aussieht.
• Bitten Sie Benutzer oder Kundenum Feedback – sie bemerken oft Dinge, die Sie vielleicht übersehen.

Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie man visuelle Regressionstests in WordPress durchführt. Als Nächstes sollten Sie sich unseren Artikel über das Erstellen von Chat-Räumen in WordPress für Ihre Benutzer und die besten Fragen zum Benutzererlebnis für Website-Besucher ansehen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.