{"id":60656,"date":"2020-08-14T00:34:19","date_gmt":"2020-08-14T00:34:19","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/tools-zum-testen-visueller-regressionen-fur-risikofreie-wordpress-updates\/"},"modified":"2020-08-14T00:34:19","modified_gmt":"2020-08-14T00:34:19","slug":"tools-zum-testen-visueller-regressionen-fur-risikofreie-wordpress-updates","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/tools-zum-testen-visueller-regressionen-fur-risikofreie-wordpress-updates\/","title":{"rendered":"Tools zum Testen visueller Regressionen f\u00fcr risikofreie WordPress-Updates"},"content":{"rendered":"

Wenn Sie Ihrer Website neuen Code hinzuf\u00fcgen, ist es wichtig sicherzustellen, dass danach alles noch ordnungsgem\u00e4\u00df funktioniert. Testen Sie die neue Funktionalit\u00e4t<\/strong> hilft Ihnen sicherzustellen, dass w\u00e4hrend des Vorgangs nichts schief gelaufen ist. Sie sollten jedoch auch sicherstellen, dass alle designbezogenen \u00c4nderungen reibungslos umgesetzt wurden.<\/p>\n

Hier kommen visuelle Regressionstest-Tools ins Spiel. Sie k\u00f6nnen Ihnen dabei helfen, zu best\u00e4tigen, dass Ihre Webseiten nach \u00c4nderungen an Ihrem Site-Code immer noch so aussehen, wie sie sollten. Verwendung dieser Art von Werkzeugen minimiert Risiken<\/strong> im Zusammenhang mit WordPress-Updates sowie benutzerdefinierten \u00c4nderungen.<\/p>\n

In diesem Beitrag erkl\u00e4ren wir, was visuelle Regressionstests sind und wie sie funktionieren. Dann werden wir pr\u00e4sentieren vier visuelle Regressionstest-Tools<\/strong> Sie k\u00f6nnen versuchen, loslegen!<\/p>\n

In diesem Artikel \ud83d\udd0d<\/h2>\n

Was ist der visuelle Regressionstest? \ud83e\uddd0<\/h2>\n

Wenn Sie \u00c4nderungen an Ihrer WordPress-Site vornehmen, besteht immer das Risiko, dass das Update dazu f\u00fchrt unerw\u00fcnschte \u00c4nderungen<\/strong> auf die Funktionalit\u00e4t und \/ oder Gestaltung seiner Seiten. Der neue Code kann sich auf die Art und Weise auswirken, wie Elemente zuvor ausgesehen und bearbeitet wurden.<\/p>\n

Einfach ausgedr\u00fcckt ist der visuelle Regressionstest eine Form von Identifizierung von Sehst\u00f6rungen<\/strong> auf Ihren Webseiten. Es kann Ihnen dabei helfen, sicherzustellen, dass Ihre WordPress-Updates und -Modifikationen Ihre Layouts und Layouts nicht zerst\u00f6ren.<\/p>\n

Visueller Regressionstest.<\/strong> Dabei werden Screenshots Ihrer Webseiten aufgenommen und mit den urspr\u00fcnglichen Referenzversionen verglichen (das Ergebnis wird h\u00e4ufig als “diff” bezeichnet). Der Zweck besteht darin, Abweichungen zwischen den Versionen festzustellen, damit Sie unerw\u00fcnschte Unstimmigkeiten schnell beheben k\u00f6nnen.<\/p>\n

Dies ist besonders wichtig, wenn es um mobiles und responsives Design geht. Angenommen, jemand versucht, eine Seite auf Ihrer Website von seinem Mobilger\u00e4t aus zu verwenden. Sie haben jedoch aufgrund \u00fcberlappender Texte oder Bilder Schwierigkeiten, die Seite zu lesen oder zu navigieren. Dies wird nat\u00fcrlich die Benutzererfahrung (UX) und frustrieren kann Ihre Absprungrate erh\u00f6hen<\/strong> den Besucher wegfahren.<\/p>\n

Visuelle Regressionstests helfen Ihnen, solche Probleme zu vermeiden. Dar\u00fcber hinaus k\u00f6nnen Sie die verbessern Benutzeroberfl\u00e4che oder Benutzeroberfl\u00e4che (UI)<\/strong> von Ihrer WordPress-Website.<\/p>\n

Der visuelle Regressionstest beinhaltet im Wesentlichen Screenshots aufnehmen und vergleichen<\/strong>. W\u00e4hrend Sie dies manuell tun, ist dies keine sehr effiziente Methode. Im Gegensatz dazu k\u00f6nnen Sie durch automatisierte Tests viel Zeit sparen.<\/p>\n

Tools zum Testen der visuellen Regression.<\/strong> pr\u00e4sentieren einen alternativen und automatisierten Ansatz zum Testen von Webseiten. Sie werden \u00fcber eine Site oder Anwendung ausgef\u00fchrt, machen Screenshots und vergleichen Versionen, um sicherzustellen, dass jede Seite in verschiedenen Browsern korrekt angezeigt wird.<\/p>\n

Dar\u00fcber hinaus untersuchen diese Tools nicht nur die gesamte Seite, sondern auch bestimmte Bl\u00f6cke und Elemente. Wenn Sie beispielsweise einer Webseite einen Textblock hinzuf\u00fcgen, stellen visuelle Regressionstests nicht nur sicher, dass der Text sichtbar ist. Au\u00dferdem k\u00f6nnen Sie sicherstellen, dass der Text angezeigt wird genau so soll es aussehen<\/strong>.<\/p>\n

Dar\u00fcber hinaus k\u00f6nnen Sie mit diesen Testtools auch die subtilsten \u00c4nderungen erkennen, einschlie\u00dflich feine Details und Pixelpegelunterschiede<\/strong>. Angenommen, eine \u00c4nderung f\u00fchrt dazu, dass die Schriftgr\u00f6\u00dfe einer CTA-Schaltfl\u00e4che (Call-to-Action) nur um wenige Pixel erh\u00f6ht wird. Dies ist etwas, das Sie wahrscheinlich nicht selbst erkennen w\u00fcrden.<\/p>\n

Wenn Sie jedoch ein Tool zum Testen der visuellen Regression verwenden, wird ein Screenshot der neuen Seite und erstellt Vergleiche es mit dem Original<\/strong> oder Referenzversion. Wenn \u00c4nderungen vorgenommen werden, wird genau hervorgehoben, was anders ist, sodass Sie bei Bedarf Ma\u00dfnahmen ergreifen k\u00f6nnen.<\/p>\n

Nachdem Sie nun besser verstanden haben, was visuelle Regressionstests sind und wof\u00fcr sie verwendet werden, ist es an der Zeit, einige der Tools zu untersuchen, die dies k\u00f6nnen erledige die Arbeit f\u00fcr dich<\/strong>. Die vier visuellen Testwerkzeuge, die wir vorstellen werden, sind:<\/p>\n

    \n
  1. Screenster<\/li>\n
  2. Geist<\/li>\n
  3. PhantomCSS<\/li>\n
  4. BackstopJS<\/li>\n<\/ol>\n

    1. Screenster<\/h3>\n

    Wenn Sie nach einem suchen webbasiertes visuelles Regressionstest-Tool<\/strong> Screenster ist eine Codierung wert, die keine Codierung erfordert:<\/p>\n

    Dieses Tool kombiniert Screenshots mit DOM- und CSS-Pr\u00fcfungen<\/strong>. Die Algorithmen f\u00fchren Vergleichstests durch und erkennen automatisch visuelle \u00c4nderungen in Ihren Inhalten. Verwenden Sie intelligente Selektoren, um Elemente auf der Seite zu identifizieren, die verschoben oder ge\u00e4ndert wurden. Dar\u00fcber hinaus sind keine Installationen oder ein Browser-Plug-In erforderlich.<\/p>\n

    Zus\u00e4tzliche Funktionen umfassen:<\/strong><\/p>\n

      \n
    • Codierte und No-Code-Tests<\/li>\n
    • Lokale und Offline-Tests<\/li>\n
    • Automatische Erkennung und Vergleichsumschaltung<\/li>\n
    • Die Option, dynamischen Inhalt zu ignorieren<\/li>\n<\/ul>\n

      Um loszulegen, k\u00f6nnen Sie sich f\u00fcr ein kostenloses Konto anmelden. Sie k\u00f6nnen auch aus mehreren Premium-Pl\u00e4nen und -Paketen ausw\u00e4hlen, je nach Ihren spezifischen Anforderungen. Da es sich um ein webbasiertes Tool handelt, k\u00f6nnen Sie es auch online testen, indem Sie nur Ihre E-Mail-Adresse verwenden. Von dort aus k\u00f6nnen Sie Erstellen Sie einen Test<\/strong>::<\/p>\n

      \"Kostenlose<\/p>\n

      Screenster zeichnet Ihre Aktionen auf und verwendet die Ergebnisse als visuelle Basis. ZU Erfahren Sie mehr \u00fcber die Verwendung von Screenster<\/strong>k\u00f6nnen Sie ihre Dokumentations- und Support-Seite besuchen.<\/p>\n

      2. Wraith<\/h3>\n

      Wraith ist ein Screenshot-Vergleichstool<\/strong> entwickelt vom BBC News Team:<\/p>\n

      \"Visueller<\/p>\n

      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\u00fctzlich sein f\u00fcr Verfolgung von zwei Websites gleichzeitig<\/strong>und Testen von Websites mit dynamischem Inhalt \u00fcber einen “Erfassungsmodus”. Sie k\u00f6nnen es auch verwenden, um Seiten auf einer Website im Laufe der Zeit zu vergleichen.<\/p>\n

      Zus\u00e4tzliche Funktionen umfassen:<\/strong><\/p>\n

        \n
      • Aufl\u00f6sungsvariation<\/li>\n
      • Haltepunkttest<\/li>\n
      • Test der Seitenreaktivit\u00e4t<\/li>\n<\/ul>\n

        Wraith macht Screenshots Ihrer Webseiten und dann einen Vergleich zwischen ihnen machen<\/strong>. Sie erhalten ein Paket mit einer PNG-Diff-Datei mit den Bildvergleichen (\u00c4nderungen werden blau hervorgehoben). Es enth\u00e4lt auch eine Datei, mit der Sie wissen, wie viel Prozent der Pixel sich ge\u00e4ndert haben.<\/p>\n

        Im Gegensatz zu Screenster ben\u00f6tigt Wraith Installation und Scripting<\/strong> um es zu benutzen. Es gibt auch einige Voraussetzungen, die Sie ben\u00f6tigen, darunter:<\/p>\n

        Pantheon bietet hilfreiche Anleitungen zu mit Wraith<\/strong> f\u00fcr visuelle Regressionstests. Weitere Informationen finden Sie auch in der Setup- und Installationsdokumentation von Wraith.<\/p>\n

        3. PhantomCSS<\/h3>\n

        PhantomCSS ist ein weiteres kostenloses Tool zum Testen der visuellen Regression. Sie k\u00f6nnen PhantomCSS f\u00fcr grundlegende visuelle Tests verwenden und reaktionsschneller Designtest<\/strong>. Es ist eine gro\u00dfartige Option, wenn Sie sich mit JavaScript auskennen.<\/p>\n

        PhantomCSS l\u00e4uft weiter CasperJS, PhantomJS und Resemble.js<\/strong>. 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\u00f6nnen.<\/p>\n

        Es gibt verschiedene M\u00f6glichkeiten, dies zu tun Installation und Verwendung von PhantomCSS<\/strong>. Eine der einfachsten Optionen ist jedoch die Verwendung des Grunt-Plugins:<\/p>\n

        \"Visuelle<\/p>\n

        Zusammen k\u00f6nnen PhantomCSS und Grunt machen Integration und Automatisierung visueller Regressionstests<\/strong> einfacher. Um PhantomCSS und Grunt verwenden zu k\u00f6nnen, m\u00fcssen Sie zuerst Grunt installieren und eine Grunt-Datei erstellen. Anschlie\u00dfend k\u00f6nnen Sie das Grunt-Plugin installieren und die PhantomCSS-Task laden.<\/p>\n

        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\u00dfe Anzahl von Anleitung, Tutorials und Support verf\u00fcgbar<\/strong> f\u00fcr die Verwendung. Es gibt es schon eine Weile, daher gibt es eine Quelle f\u00fcr Ressourcen und Informationen zu GitHub, die Sie \u00fcberpr\u00fcfen k\u00f6nnen.<\/p>\n

        4. BackstopJS<\/h3>\n

        Zu guter Letzt k\u00f6nnen Sie BackstopJS verwenden, um visuelle Regressionstests f\u00fcr zu automatisieren reaktionsschnelle Websites und Apps<\/strong>::<\/p>\n

        \"Die<\/p>\n

        BackstopJS erm\u00f6glicht es Ihnen Vergleichen Sie DOM-Screenshots im Laufe der Zeit<\/strong>. Erstellen Sie Screenshots von Webseiten in mehreren Bildschirmgr\u00f6\u00dfen, um sie als Referenz zu verwenden. Sie k\u00f6nnen sie verwenden, um Regressionen zu finden, die nach dem \u00c4ndern des CSS Ihrer Site m\u00f6glicherweise vorhanden sind.<\/p>\n

        Wie PhantomCSS verwendet auch BackstopJS Resemble.js, CasperJS und PhantomJS (oder SlimerJS). Zus\u00e4tzliche Funktionen umfassen:<\/strong><\/p>\n

          \n
        • Filterung der Szenariovisualisierung<\/li>\n
        • Ein visueller Differenzpr\u00fcfer<\/li>\n
        • CLI-Berichte<\/li>\n
        • Chrome Headless-Rendering<\/li>\n<\/ul>\n

          Einer der Hauptvorteile von BackstopJS ist wie einfach zu bedienen ist<\/strong>. Um zu beginnen, m\u00fcssen Sie nur das globale npm-Installationsprogramm ausf\u00fchren. Von dort aus k\u00f6nnen Sie Ihr Projektverzeichnis suchen und Backup Init ausf\u00fchren.<\/p>\n

          Um einen Test auszuf\u00fchren, verwenden Sie den Sicherungstest aus dem Stammverzeichnis. Um eine Reihe von \u00c4nderungen zu genehmigen, k\u00f6nnen Sie die Sicherungsgenehmigung verwenden. durch weitere Anleitung und Anleitung<\/strong>Schauen Sie sich die BackstopJS-Seite auf GitHub an.<\/p>\n

          Ende \ud83d\udca1<\/h2>\n

          Wenn Sie das tun Updates f\u00fcr Ihre WordPress-Website<\/strong>Es ist wichtig zu \u00fcberpr\u00fcfen, ob die \u00c4nderungen nichts besch\u00e4digen. Dies bedeutet, dass sowohl die Funktionalit\u00e4t als auch das Design der Website intakt sind.<\/p>\n

          In diesem Beitrag haben wir gesehen vier visuelle Regressionstest-Tools<\/strong> Sie k\u00f6nnen f\u00fcr WordPress-Updates ohne Risiko verwenden:<\/p>\n

            \n
          1. \nScreenter:<\/strong> Ein webbasiertes visuelles Vergleichstool, das Screenshots mit DOM- und CSS-Pr\u00fcfungen kombiniert (ohne dass eine Codierung erforderlich ist).<\/li>\n
          2. \nGeist:<\/strong> Ein n\u00fctzliches Tool zum Testen und Vergleichen von Websites mit dynamischen Inhalten.<\/li>\n
          3. \nPhantomCSS:<\/strong> Ein kostenloses visuelles Regressionstest-Tool, das ideal ist, wenn Sie JavaScript gut kennen.<\/li>\n
          4. \nBackstopJS:<\/strong> Automatisieren Sie visuelle Regressionstests f\u00fcr reaktionsf\u00e4hige Websites und Apps.<\/li>\n<\/ol>\n

            M\u00f6chten Sie Ihre Meinung \u00e4u\u00dfern oder sich an der Unterhaltung beteiligen? F\u00fcgen Sie Ihre Kommentare hinzu \ud83d\udc26 in Twitter.<\/p>\n

            \t\t<\/p>\n ","protected":false},"excerpt":{"rendered":"

            Wenn Sie Ihrer Website neuen Code hinzuf\u00fcgen, ist es wichtig sicherzustellen, dass danach alles noch ordnungsgem\u00e4\u00df funktioniert. Testen Sie die neue Funktionalit\u00e4t hilft Ihnen sicherzustellen, dass w\u00e4hrend des Vorgangs nichts schief gelaufen ist. Sie sollten jedoch auch sicherstellen, dass alle designbezogenen \u00c4nderungen reibungslos umgesetzt wurden. Hier kommen visuelle Regressionstest-Tools ins Spiel. Sie k\u00f6nnen Ihnen dabei […]<\/p>\n","protected":false},"author":1,"featured_media":60657,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/Herramientas-de-prueba-de-regresion-visual-para-actualizaciones-de-WordPress.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/60656"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=60656"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/60656\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/60657"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=60656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=60656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=60656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}