So führen Sie visuelle Regressionstests in WordPress ganz einfach durch

Es kann stressig sein, Ihre WordPress-Website so aussehen zu lassen, wie sie sollte. Ein kleines Update oder eine schnelle CSS-Anpassung kann ein Layout leise beschädigen, und Sie bemerken es oft erst, wenn ein Besucher Sie darauf hinweist.

Das Schwierige daran ist, dass die Überprüfung jeder Seite von Hand einfach nicht praktikabel ist. Es dauert zu lange und es ist leicht, kleine Änderungen zu übersehen. 🤦

Und obwohl „visuelles Regressionstesting“ technisch klingt, benötigen Sie keine Entwicklertools, um es zu verwenden. Es ist eine einfache Möglichkeit, Stunden manueller Überprüfung zu sparen und peinliche Layoutprobleme zu vermeiden.

Nach dem Testen verschiedener Tools und Methoden habe ich eine zuverlässige Option gefunden, die keine Programmier- oder technischen Kenntnisse erfordert. In diesem Leitfaden zeige ich Ihnen, wie Sie mit nur wenigen einfachen Schritten visuelle Regressionstests auf Ihrer WordPress-Website durchführen.

Was ist visuelles Regressionstesting?

Visuelles Regressionstesting ist eine Methode, um zu überprüfen, ob sich das Design Ihrer Website nach einem Update unerwartet ändert. Es funktioniert, indem Schnappschüsse Ihrer Seiten vor und nach dem Update verglichen werden, um alles zu erkennen, was anders aussieht.

Jedes Mal, wenn Sie den WordPress-Kern aktualisieren, ein Plugin installieren, ein Theme ändern oder Code anpassen, besteht die Gefahr, dass sich etwas im Frontend verschiebt – ein fehlender Button, ein kaputtes Layout oder ein Bild, das plötzlich nicht mehr geladen wird.

Das Problem? Diese visuellen Fehler bleiben oft unbemerkt, bis ein Besucher sie über ein Kontaktformular oder eine Umfrage zum Designfeedback meldet. Bis dahin ist der Schaden für die Benutzererfahrung Ihrer Website möglicherweise bereits entstanden.

Deshalb ist die Durchführung von visuellen Regressionstests so hilfreich.

Der Prozess ist einfach: Machen Sie Schnappschüsse Ihrer Seiten vor und nach einem Update und vergleichen Sie sie dann, um alles zu erkennen, was sich geändert hat.

Und wenn Sie auf einer Staging-Website testen (was ich empfehle), können Sie sicher Updates durchführen und Vergleiche anstellen, um visuelle Probleme zu erkennen, bevor etwas live geht.

Sie müssen diese Vergleiche auch nicht manuell durchführen.

Mit Tools für visuelle Regressionstests wie VRTs, Percy oder BackstopJS können Sie Screenshot-Vergleiche automatisieren und überprüfen, wie Ihre Website auf verschiedenen Bildschirmgrößen aussieht – so erkennen Sie Layoutprobleme auf Desktops, Tablets und Mobilgeräten.

Warum ist visuelles Regressionstesting für WordPress-Benutzer wichtig?

Wenn Sie eine WordPress-Website verwalten, ist visuelles Regressionstesting ein zeiteffizientes Sicherheitsnetz. Anstatt nach einem Update jede Seite durchzuklicken, gibt Ihnen dieses Tool einen visuellen Bericht darüber, was sich geändert hat – und ob es etwas ist, das Sie beheben müssen.

Dies ist besonders hilfreich in vielen Szenarien, wie z. B. für Agenturen, die Updates auf mehreren WordPress-Websites durchführen, für Freiberufler, die Kunden-Websites verwalten, oder für Inhaber von Online-Shops, die sicherstellen möchten, dass die Produkt- und Checkout-Seiten intakt bleiben.

Kurz gesagt, visuelles Regressionstesting hilft Ihnen, frustrierende Überraschungen zu vermeiden, Zeit zu sparen und Ihre WordPress-Website reibungslos am Laufen zu halten.

Mit diesen Worten zeige ich Ihnen, wie Sie visuelles Regressionstesting in WordPress ganz einfach durchführen können. Hier ist ein kurzer Überblick über die Schritte, die wir behandeln werden:

• Schritt 1: Installieren und Aktivieren des Plugins für visuelle Regressionstests
• Schritt 2: Konfigurieren Sie die VRTs-Plugin-Einstellungen
• Schritt 3: Neue Seiten oder Beiträge zum Testen hinzufügen
• Schritt 4: Auf visuelle Unterschiede prüfen
• Schritt 5: Überprüfen und Maßnahmen ergreifen
• FAQ: Wie man visuelles Regressionstesting in WordPress durchführt
• Nächste Schritte: Verbessern Sie das Design Ihrer WordPress-Website

Schritt 1: Installieren und Aktivieren des Plugins für visuelle Regressionstests

In diesem Tutorial verwende ich das VRTs-Plugin, da es anfängerfreundlich und einfach für visuelles Regressionstesting zu verwenden ist. 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 nimmt Screenshots der von Ihnen ausgewählten Seiten. Sie können dann Vergleiche manuell auslösen oder sie so planen, dass sie automatisch ausgeführt werden, nachdem Sie Änderungen an Ihrer Website vorgenommen haben, wie z. B. das Aktualisieren eines Plugins oder das Anpassen Ihres Themes.

Das Plugin vergleicht dann die „Vorher“- und „Nachher“-Screenshots nebeneinander und hebt alle visuellen Unterschiede hervor.

Anstatt jede Seite manuell zu überprüfen, erhalten Sie einen schnellen visuellen Bericht, der zeigt, was sich geändert hat und ob etwas nicht stimmt.

Um das Plugin zu installieren, müssen Sie zuerst die VRTs-Website besuchen und sich für einen Plan anmelden, indem Sie auf die Schaltfläche „Kostenlos starten“ klicken.

Sie können dann einen der Pläne auswählen.

Der kostenlose Plan erlaubt Ihnen, bis zu 3 Seiten pro Tag auf einer Domain zu testen und tägliche Tests zu planen. Bezahlte Pläne erlauben Ihnen, mehr Seiten zu testen, manuelle Tests durchzuführen und visuelle Regressionstests nach Updates von WordPress Core, Plugins und Themes automatisch auszuführen.

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

Befolgen Sie dann die Anweisungen, um sich auf der VRTs-Website für ein Konto anzumelden und Ihre Zahlungsdaten einzugeben.

Sobald Sie die Registrierung abgeschlossen haben, gelangen Sie zu Ihrem VRTs-Dashboard, von wo aus Sie das Plugin als .zip-Datei herunterladen können.

Gehen Sie dann einfach zur Seite Plugins » Plugin hinzufügen und klicken Sie auf die Schaltfläche „Plugin hochladen“. Von hier aus können Sie die gerade heruntergeladene .zip-Datei des VRTs-Plugins auswählen.

Stellen Sie sicher, dass Sie das Plugin nach der Installation 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, ist es an der Zeit zu entscheiden, wann Ihre visuellen Regressionstests ausgeführt werden sollen.

Gehen Sie in Ihrem WordPress-Adminmenü zu VRTs » Einstellungen.

Scrollen Sie auf der Einstellungsseite nach unten zum Abschnitt „Trigger“. Hier legen Sie fest, wann das Plugin automatisch Snapshots aufnehmen und vergleichen soll.

Hier sind die verfügbaren Optionen:

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

Sobald Sie den Trigger ausgewählt haben, der zu Ihrem Workflow (oder Ihrer Lizenz) passt, klicken Sie einfach auf die Schaltfläche „Änderungen speichern“ am unteren Rand der Seite.

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

Sobald Sie die Plugin-Einstellungen konfiguriert haben, ist es an der Zeit zu wählen, welche Seiten oder Beiträge Sie in Ihre visuellen Regressionstests einbeziehen möchten.

Wechseln wir zum Tab „Tests“, wo Sie Ihre visuellen Tests verwalten und ausführen. Von hier aus können Sie auf die Schaltfläche „Neu hinzufügen“ klicken. Dadurch können Sie Beiträge oder Seiten zum Testen auswählen.

Wählen Sie im erscheinenden Popup die Beiträge oder Seiten aus, die Sie in Ihre visuelle Regressionstests einbeziehen möchten.

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

Das VRTs-Plugin nimmt einen anfänglichen Schnappschuss jeder ausgewählten Seite auf. Dies dient als Ihr Baseline – im Grunde eine „Vorher“-Version, wie Ihre Beiträge oder Seiten jetzt aussehen.

Nachdem Sie Ihren Test eingerichtet haben, sehen Sie eine Anweisung, die Seite zu aktualisieren, um den anfänglichen Snapshot zu laden. Aktualisieren Sie die Seite.

Nach der Aktualisierung sehen Sie einen Link zum Snapshot für die Seite oder den Beitrag, den Sie zum Testen hinzugefügt haben.

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

Sie können auf den Link 'Snapshot anzeigen' klicken, um den ursprünglichen Screenshot zu überprüfen.

Es wird sich in einem neuen Tab öffnen, wie hier:

Wenn Sie die kostenlose Version verwenden, ist Ihr Test nun für den nächsten Tag geplant. Sie können mit Ihrer Website fortfahren und in 24 Stunden zurückkehren, um den Vergleichsbericht anzuzeigen.

Wenn Sie jedoch die Pro-Version haben, können Sie sofort einen Test durchführen, um Probleme sofort zu erkennen.

Schritt 4: Auf visuelle Unterschiede prüfen

Sobald der Test abgeschlossen ist und visuelle Änderungen erkannt werden, sehen Sie eine Benachrichtigung im Tab VRTs » Runs.

Auf dem Bildschirm "Runs" können Sie mit der Maus über den Lauf mit erkannten Änderungen fahren.

Klicken Sie dann auf den Link „Details anzeigen“, wenn er erscheint.

Auf dem nächsten Bildschirm sehen Sie einen Seitenvergleich Ihrer Seite, der die Versionen "Vorher" und "Nachher" zeigt.

Das Plugin hebt visuelle Unterschiede automatisch hervor, sodass Sie Probleme wie diese schnell erkennen können:

• Layoutverschiebungen und falsch ausgerichtete Elemente: Wenn sich Ihr Design nach einem Plugin-Update oder einer Theme-Änderung ändert, z. B. wenn Schaltflächen ihren Platz wechseln oder Text herumspringt, wird VRTs dies melden.
• 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.
• Dynamische Inhalte (Fehlalarme): Manchmal markiert das Tool eine Änderung, die kein Fehler ist. Dies geschieht häufig mit Bildschiebereglern, Anzeigen oder rotierenden Testimonials, die sich jedes Mal ändern, wenn die Seite geladen wird.
• Unerwartete Inhaltsänderungen: Das Plugin warnt Sie auch vor Änderungen an Texten, Links oder Bildern, sodass Sie unbefugte Bearbeitungen oder Veröffentlichungsfehler erkennen können, bevor es die Benutzer tun.

Sie können den Ziehpunkt in der Mitte des Bildschirms verwenden, um zwischen der alten und der neuen Version zu wechseln und die genauen Änderungen visuell zu bestätigen.

Schritt 5: Überprüfen und Maßnahmen ergreifen

Nachdem Sie einen visuellen Regressionstest durchgeführt haben, ergreifen Sie Maßnahmen basierend auf den Ergebnissen. Hier erfahren Sie, 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 beheben, indem Sie die Seite bearbeiten, z. B. das Layout anpassen, Elemente verschieben oder fehlende Funktionen wieder hinzufügen.
• Auf ein Backup zurückgreifen: Wenn die Änderungen größer oder schwieriger zu beheben sind, können Sie die Seite mithilfe Ihres Website-Backups oder der Versionshistorie auf eine frühere Version wiederherstellen. Dies hilft, Probleme auf Ihrer Website zu vermeiden.

Beachten Sie jedoch, dass Sie, wenn Sie ein Problem beheben und der Test immer noch den Fehler anzeigt, unbedingt Ihren WordPress-Cache leeren müssen, damit das Tool die neueste Version Ihrer Website erkennt.

FAQ: Wie man visuelles Regressionstesting in WordPress durchführt

Wenn Sie gerade erst mit visuellen Regressionstests beginnen, sind Sie nicht allein. Hier sind einige schnelle Antworten auf häufig gestellte Fragen von WordPress-Benutzern und -Entwicklern.

Was ist der Unterschied zwischen Snapshot-Testing und visuellem Regressionstesting?

Snapshot-Tests sind ein Begriff aus der Entwicklung, der sich normalerweise auf die Überprüfung bezieht, ob die zugrunde liegende Codeausgabe mit einem früheren Datensatz übereinstimmt. Visuelle Regressionstests prüfen, wie Ihre Website für das menschliche Auge aussieht, indem sie Screenshots vergleichen, um Layout- oder Designänderungen zu erkennen.

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

Die einfachste Option ist das Plugin VRTs – Visual Regression Tests. Es ist anfängerfreundlich, läuft innerhalb Ihres Dashboards und erfordert keine Programmierung. Die kostenlose Version funktioniert für die meisten Benutzer gut.

Wie kann ich Regressionstests manuell durchführen?

Manuelles Testen bedeutet, nach einem Update durch Ihre wichtigen Seiten zu klicken, um sicherzustellen, dass alles noch richtig aussieht. Sie möchten Seiten wie Ihre Homepage, Kontaktseite, Blogbeiträge und alle benutzerdefinierten Layouts oder Checkout-Schritte überprüfen. Es funktioniert, kann aber viel Zeit in Anspruch nehmen.

Wie beschleunigt man Regressionstests?

Automatisieren Sie es. Ein Plugin wie VRTs – Visual Regression Tests kann Screenshots Ihrer wichtigsten Seiten aufnehmen und sie für Sie vergleichen, sodass Sie nicht alles von Hand überprüfen müssen.
Die Verwendung einer Staging-Site hilft Ihnen auch, Probleme zu erkennen, bevor Sie Ihre Live-Site aktualisieren.

Was sind die besten Möglichkeiten, das Design einer WordPress-Website zu testen?

Ein visuelles Regressionstool ist eine der einfachsten Möglichkeiten, Layoutänderungen nach einem Update zu erkennen. Es hilft auch, Updates auf einer Staging-Site zu testen, bevor sie live gehen.

Stellen Sie sicher, dass Sie überprüfen, wie Ihre Seiten auf Desktop, Tablet und Mobilgeräten aussehen. Browser-Entwicklertools erleichtern das schnelle Testen verschiedener Bildschirmgrößen. Und schließlich kann das Sammeln von Feedback von echten Benutzern oder Kunden Ihnen helfen, Details zu erkennen, die Sie möglicherweise übersehen.

Nächste Schritte: Verbessern Sie das Design Ihrer WordPress-Website

Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie visuelles Regressionstesting in WordPress durchführen. Wenn Sie Ihre Website weiter verbessern möchten, gefällt Ihnen vielleicht auch:

• Leitfaden für Anfänger zur Neugestaltung einer WordPress-Website
• Schlüsselelemente für ein effektives WordPress-Website-Design
• Wie Sie Feedback zum Website-Design in WordPress erhalten
• So verbessern Sie die Benutzererfahrung in WordPress
• Fragen zur Benutzererfahrung und zum Feedback, die Sie Website-Besuchern stellen können

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.