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.

WordPress visuelles Regressionstesting löst dieses Problem, indem es automatisch vergleicht, wie Ihre Seiten vor und nach jeder Änderung aussehen, und Sie dann im Moment einer Änderung benachrichtigt.

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.

Nachdem ich verschiedene Tools und Methoden getestet habe, habe ich eine zuverlässige Option gefunden, die keine Programmierung oder technischen Kenntnisse erfordert. In diesem Leitfaden zeige ich Ihnen, wie Sie visuelle Regressionstests auf Ihrer WordPress-Website in fünf einfachen Schritten 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 Design-Feedback-Umfrage meldet. Bis dahin ist der Schaden für die Benutzererfahrung Ihrer Website möglicherweise bereits angerichtet.

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 visuelles Regressionstesting 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.

WordPress-Sites sind aufgrund ihrer Zusammensetzung aus vielen unabhängigen Teilen einzigartig anfällig für Layout-Brüche – Ihr Theme, Page Builder, Blöcke und Plugins gehen alle von unterschiedlichen Annahmen aus, wie Ihre Seiten gerendert werden.

Jeder dieser Teile kann heimlich die Darstellung einer Seite verändern:

• Ein Plugin-Update ändert das Styling eines Buttons oder Formulars
• Ein WordPress Core-Update verschiebt die Anzeige eines Gutenberg-Blocks
• Ein WooCommerce-Update ändert das Produktlayout oder die Checkout-Felder
• Ein Theme-Update passt Abstände, Schriftarten oder responsive Breakpoints an
• Eine benutzerdefinierte CSS-Bearbeitung wirkt sich auf mehr Seiten aus als erwartet

WordPress visuelles Regressionstesting fängt diese unbeabsichtigten Änderungen ab, bevor Ihre Besucher es tun. Anstatt jede Seite nach jedem Update durchzuklicken, vergleicht das Tool Vorher-Nachher-Screenshots und markiert alles, was anders aussieht.

Für vielbeschäftigte Website-Besitzer bedeutet dies Seelenfrieden. Für Agenturen, die Kunden-Websites verwalten, bedeutet dies, Regressionen zu erkennen, bevor ein Kunde Sie deswegen kontaktiert.

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

Um zu beginnen, melden Sie sich bei Ihrem Staging-Site-Dashboard an (oder Ihrer Live-Site, wenn Sie möchten).

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 auf. 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, z. B. ein Plugin aktualisiert oder Ihr Theme angepasst haben.

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.

Zum Zeitpunkt der Erstellung erlaubt der kostenlose Plan, bis zu 3 Seiten pro Tag auf einer Domain zu testen und tägliche Tests zu planen. Bezahlte Pläne erlauben das Testen von mehr Seiten, das Ausführen manueller Tests und das automatische Ausführen von visuellen Regressionstests nach WordPress Core-, Plugin- und Theme-Updates.

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. Alle Details finden Sie in unserer Anleitung zum Installieren 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-Admin-Menü 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 bei Bedarf ausführen (Pro) – Lösen Sie Tests manuell aus, wann immer Sie sie benötigen, direkt von Ihrem WordPress-Dashboard.

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 Ihr visuelles Regressionstesting 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. Buttons, die ihre Position ändern, oder Text, der herumspringt, wird VRTs dies kennzeichnen.
• Fehlende oder defekte Elemente: Ob ein fehlendes Bild, ein CTA-Button oder ein eingebettetes Formular, VRTs machen es einfach, alles zu erkennen, was unerwartet verschwindet.
• Dynamische Inhalte (False Positives): Manchmal markiert das Tool eine Änderung, die kein Fehler ist. Dies geschieht häufig bei Bildschiebereglern, Anzeigen oder rotierenden Testimonials, die sich jedes Mal ändern, wenn die Seite geladen wird.
• Unerwartete Inhaltsänderungen: Das Plugin benachrichtigt Sie auch über Änderungen an Texten, Links oder Bildern, sodass Sie nicht autorisierte 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.

Wenn die Änderung beabsichtigt war (wie eine geplante Neugestaltung der Homepage), können Sie den neuen Snapshot einfach genehmigen, damit das Plugin ihn als neue Basis für die Zukunft verwendet.

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

Nachdem Sie einen visuellen Regressionstest durchgeführt haben, ergreifen Sie Maßnahmen basierend auf den Ergebnissen.

Eine Sache, die Sie wissen sollten, bevor Sie mit der Überprüfung von Benachrichtigungen beginnen: Nicht jede markierte Differenz ist tatsächlich ein Fehler. Manchmal ändert sich eine Seite bei jedem Besuch legitim, und der Test wird diese Änderungen ebenfalls markieren.

Diese werden als falsch-positive Ergebnisse bezeichnet und sind der häufigste Grund, warum neue Benutzer von visuellem Regressionstesting frustriert sind. Da das Tool im Wesentlichen prüft, ob die Pixel-Differenz > 0% ist, löst jedes dynamische Element, das die Pixel verschiebt, eine Benachrichtigung aus.

Hier sind die häufigsten Auslöser für falsch-positive Ergebnisse auf WordPress-Sites:

• Slider und Animationen(Bildkarussells, Heldenanimationen, Hover-Effekte)
• Live-Daten(neueste Beitrags-Feeds, Kommentaranzahlen, WooCommerce-Lagerbestandszähler)
• Anzeigenplatzierungen und Trackerdie bei jedem Besuch unterschiedliche Inhalte laden
• Cookie- oder DSGVO-Zustimmungsbannerdie unvorhersehbar erscheinen
• Lazy-Loading-Bilderdie möglicherweise geladen wurden oder auch nicht, als der Screenshot aufgenommen wurde
• Schriftartendie sich leicht unterscheiden, bevor sie vollständig geladen sind

Wenn Sie eine dieser Markierungen sehen, öffnen Sie die Vergleichsansicht in VRTs und verwenden Sie die Option „Elemente ausblenden“, um diesen Bereich von zukünftigen Tests auszuschließen. Danach sehen Sie nur noch echte Designänderungen, die eine Überprüfung wert sind – was genau das ist, was Sie wollen.

Hier sind die nächsten Schritte:

• Seite manuell bearbeiten: 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 Layoutänderungen geringfügig sind, können Sie diese oft rückgängig machen, indem Sie die Seite auf eine frühere Version wiederherstellen. Wenn ein großes Update Ihre gesamte Website beschädigt hat, müssen Sie möglicherweise ein aktuelles Website-Backup wiederherstellen. Denken Sie jedoch daran, dass dadurch alle Daten Ihrer Website zurückgesetzt werden, wodurch möglicherweise aktuelle Verkäufe oder Kommentare gelöscht werden.

Das gesagt, beachten Sie, dass wenn Sie ein Problem beheben und der Test immer noch den Fehler anzeigt, stellen Sie sicher, dass Sie Ihren WordPress-Cache leeren, sowie alle CDN- oder Hosting-Caches. So sieht das Tool die neueste Version Ihrer Website.

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-Testing ist ein Begriff aus der Softwareentwicklung, der sich normalerweise auf die Überprüfung des versteckten Codes hinter Ihrer Website bezieht, um zu sehen, ob er mit einer früheren Version übereinstimmt, anstatt wie er auf dem Bildschirm aussieht.

Visuelles Regressionstesting prüft, wie Ihre Website für das menschliche Auge aussieht, indem Screenshots verglichen werden, 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 in Ihrem Dashboard 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 Feedback von echten Benutzern oder Kunden Ihnen helfen, Details zu erkennen, die Sie möglicherweise übersehen.

Wann sollte ich visuelle Regressionstests auf meiner WordPress-Website ausführen?

Die besten Zeiten für einen visuellen Regressionstest sind direkt vor und direkt nach jeder Änderung, die das Design Ihrer Website beeinträchtigen könnte. Dazu gehören WordPress-Core-Updates, Plugin- und Theme-Updates, benutzerdefinierte CSS-Bearbeitungen und das Hinzufügen neuer Blöcke oder Seitenerstellungselemente.

Wenn Sie keine häufigen Änderungen vornehmen, reichen tägliche geplante Tests aus, um langsame Probleme zu erkennen, wie z. B. ein Plugin-Update, das leise ein Layout beschädigt hat, das Sie nicht überprüft haben.

Was verursacht Fehlalarme beim visuellen Regressionstesting?

Fehlalarme treten auf, wenn der Test einen Unterschied feststellt, der eigentlich kein Fehler ist. Die häufigsten Ursachen auf WordPress-Websites sind Slider, Animationen, Anzeigenplatzierungen, Cookie-Banner, Lazy-Loading-Bilder und Live-Daten wie die neuesten Beiträge oder WooCommerce-Lagerbestandszähler.

In VRTs können Sie diese Elemente ausblenden, sodass sie vom Vergleich ausgeschlossen sind. Das bedeutet, dass zukünftige Tests nur echte Designänderungen kennzeichnen.

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.