Visuelle Regressionstests mit Phantomcss

Key Takeaways

• Phantomcss ist ein Knoten.js -Tool, das visuelle Regressionstests durchführt. Dies ist eine Form von automatisierten Tests, die überprüft, ob Webseitenelemente wie beabsichtigt angezeigt werden. Dies geschieht, indem Sie einen Screenshot der Seite oder eines bestimmten Elements aufnehmen, es mit einem gespeicherten Basisbild vergleicht und ein Bild des Unterschieds erstellen, wenn die Screenshots nicht übereinstimmen.
• Phantomcss basiert auf mehreren Komponenten, einschließlich Casperjs zum Interagieren mit einem Phantomcss oder Slimerjs -Browser, Phantomjs 2 oder SlimerJs als Kopflosenbrowser und ähneln.js zum Vergleich von Bildern.
• Um Phantomcss zu verwenden, wird eine Testsuite in Form von Node.js -Skripten erstellt. Die Testsuite öffnet die erforderliche Seite, macht Screenshots und vergleicht sie mit Bildern aus dem vorherigen Lauf. Wenn Änderungen an der Website vorgenommen werden, kann der Test erneut durchgeführt werden, um den neuen Screenshot mit dem Original zu vergleichen.
• Wenn während eines Tests eine visuelle Änderung erkannt wird, unterstreicht Phantomcss die veränderten Bereiche. Um diese Änderungen zu akzeptieren, kann der Testbefehl mit einem zusätzlichen Argument für Rebas ausgeführt werden. Dies ersetzt das vorherige Basisbild durch das neue.

Wenn Sie in Ihrer Karriere eine ernsthafte Entwicklung durchgeführt haben, haben Sie wahrscheinlich den Punkt erreicht, als Sie die Bedeutung automatisierter Tests während der Entwicklung erkannt haben. Abhängig von Ihrer Erfahrung könnte Sie diese Erkenntnis in einem großen Ausbruch treffen oder sie kann im Laufe der Zeit sanft zu Ihnen kommen, aber sie wird schließlich zur zweiten Natur. Automatische Tests werden in vielen Formen geliefert, von Unit -Tests, wenn Sie isolierte Codestücke testen, bis hin zu Integrations- und Funktionstests, wenn Sie testen, wie sich verschiedene Teile Ihres Systems zusammen verhalten. In diesem Artikel geht es nicht um einen Überblick über automatische Tests im Allgemeinen. Es geht um eine bestimmte und eine relativ neue Nische, die als visuelle Regressionstest .

bezeichnet wird

visuelle Regressionstests verfolgen einen alternativen Ansatz zum Testen von Webseiten. Anstatt nur sicherzustellen, dass ein Element oder ein Textwert im DOM vorhanden ist, öffnet der Test tatsächlich die Seite und prüft, ob dieser spezielle Block genau so aussieht, wie Sie es für möchten. Um sicherzustellen, dass Sie den Unterschied aufgenommen haben, lassen Sie mich Ihnen ein Beispiel geben. Stellen Sie sich vor, Sie möchten, dass Ihre Website Ihre Besucher mit einer freundlichen Nachricht begrüßt:

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

Um sicherzustellen, dass es funktioniert, können (und sollten) Einheit den Code -Stück testen, der die Nachricht erzeugt, und prüft, ob es den richtigen Namen einfügt. Sie können auch einen Funktionstest mit Selen oder Prospraktor schreiben, um festzustellen, ob das Element tatsächlich auf der Seite mit dem richtigen Text vorhanden ist. Aber das ist nicht genug. Wir möchten nicht nur testen, dass der Text korrekt generiert wird oder im DOM angezeigt wird, sondern um sicherzustellen Jemand hat die Farbe des Textes nicht versehentlich außer Kraft gesetzt. Es gibt eine Reihe von Tools dafür, aber heute werden wir uns insbesondere eine Option ansehen - Phantomcss. Was ist Phantomcss?

Phantomcss ist ein Knoten.js -Tool zur Durchführung visueller Regressionstests. Es ist Open Source und entwickelt von den Jungs bei Huddle. Mit Phantomcss können Sie einen kopflosen Browser ausführen, eine Seite öffnen und auf der Seite einen Screenshot der gesamten Seite oder ein bestimmtes Element aufnehmen. Dieser Screenshot wird als Basisbild als zukünftige Referenz gespeichert. Immer wenn Sie etwas auf der Website ändern, können Sie Phantomcss erneut ausführen. Es dauert einen weiteren Screenshot und vergleichen es mit dem Originalbild. Wenn keine Unterschiede festgestellt werden, wird der Test bestehen. Wenn die Screenshots jedoch nicht übereinstimmen, wird der Test fehlschlagen und ein neues Bild, das den Unterschied zeigt, wird für Sie erstellt. Dieser Ansatz macht dieses Tool perfekt zum Testen von Änderungen in CSS.

Phantomcss ist auf mehreren Schlüsselkomponenten aufgebaut:

Casperjs - Ein Werkzeug zum Interagieren mit einem Phantomcss oder Slimerjs -Browser. Sie können eine Seite öffnen und Benutzerinteraktionen ausführen, z. B. auf Schaltflächen oder Eingabeteile. Darüber hinaus bietet Casperjs ein eigenes Test -Framework und die Möglichkeit, Screenshots einer Seite zu erfassen.

• Phantomjs 2 oder Slimerjs - Zwei verschiedene kopflose Browser, von denen beide mit Phantomcss verwendet werden können. Ein kopfloser Browser ist wie ein normaler Browser ohne Benutzeroberfläche.
• ähnelt.js - eine Bibliothek zum Vergleich von Bildern.
Phantomcss können zusammen mit Phantomjs und SlimerJs verwendet werden, aber in diesem Artikel werden wir Phantomjs verwenden.

Nehmen wir es für einen Spin

Lassen Sie uns ein winziges Testprojekt einrichten, um zu sehen, wie wir dieses Tool in der Praxis verwenden können. Dafür benötigen wir eine Webseite zum Testen und einen einfachen Node.js -Webserver, damit Casperjs die Seite öffnen kann.

Einrichten eines Testprojekts

Erstellen Sie eine Index.html -Datei mit einigen Beispielinhalten:

So installieren Sie den Webserver, initialisieren Sie ein NPM-Projekt und installieren Sie das HTTP-Server-Paket.

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></span><span>
</span></span><span><span>      <span><span>.tag</span> {
</span></span></span><span><span>        <span>color: #fff;
</span></span></span><span><span>        <span>font-size: 30px;
</span></span></span><span><span>        <span>border-radius: 10px;
</span></span></span><span><span>        <span>padding: 10px;
</span></span></span><span><span>        <span>margin: 10px;
</span></span></span><span><span>        <span>width: 500px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-first</span> {
</span></span></span><span><span>        <span>background: lightcoral;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-second</span> {
</span></span></span><span><span>        <span>background: lightskyblue;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span>></span>
</span>    <span><span><span><div> class<span>="tag tag-first"</span>>The moving finger writes, and having written moves on.<span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="tag tag-second"</span>>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Definieren wir ein einfaches NPM -Skript, um den Server auszuführen. Fügen Sie einfach den folgenden Skripteabschnitt zu package.json

<span>npm init
</span><span>npm install http-server --save-dev</span>

hinzu

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

Jetzt können Sie NPM -Start im Projektordner ausführen, und auf der Indexseite ist auf der Standardadresse http://127.0.0.1:8080 zugegriffen. Starten Sie den Server und lassen Sie ihn vorerst ausgeführt. Wir brauchen es in einiger Zeit.

Phantomcss

installieren

Die Installation von Phantomcss ist einfach. Sie müssen Ihrem Projekt nur einige Abhängigkeiten hinzufügen:

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></span><span>
</span></span><span><span>      <span><span>.tag</span> {
</span></span></span><span><span>        <span>color: #fff;
</span></span></span><span><span>        <span>font-size: 30px;
</span></span></span><span><span>        <span>border-radius: 10px;
</span></span></span><span><span>        <span>padding: 10px;
</span></span></span><span><span>        <span>margin: 10px;
</span></span></span><span><span>        <span>width: 500px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-first</span> {
</span></span></span><span><span>        <span>background: lightcoral;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-second</span> {
</span></span></span><span><span>        <span>background: lightskyblue;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span>></span>
</span>    <span><span><span><div> class<span>="tag tag-first"</span>>The moving finger writes, and having written moves on.<span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="tag tag-second"</span>>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Erstellen einer Testsuite

Jetzt haben wir alles, was wir brauchen, um die erste Testsuite einzurichten. Phantomcss -Testsuiten werden in Form von Node.js -Skripten erstellt, in denen Sie die erforderliche Seite Ihrer Website öffnen, Screenshots machen und mit den Bildern aus dem vorherigen Lauf vergleichen. Wir beginnen mit einem einfachen Testfall, der auf der Demo von Phantomcss selbst basiert.

<span>npm init
</span><span>npm install http-server --save-dev</span>

Der Test öffnet http://127.0.0.1:8080/, machen Sie einen Screenshot des Körperelements und speichern Sie ihn unter Screenshots/Body.png.

Sobald wir den Test selbst bestehen, ist es nur noch übrig, ein Skript zum Ausführen des Tests zu definieren. Fügen wir das folgende Skript zu package.json als nächstes hinzu:

<span>"scripts": {
</span>  <span>"start": "http-server"
</span><span>},</span>

Sie können es jetzt ausführen, indem Sie den folgenden Befehl ausführen:

<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>

Die Ausgabe, die Sie sehen werden, sollte ungefähr so ​​aussehen:

<span>var phantomcss = require('phantomcss');
</span>
<span>// start a casper test
</span>casper<span>.test.begin('Tags', function(test) {
</span>
  phantomcss<span>.init({
</span>    <span>rebase: casper.cli.get('rebase')
</span>  <span>});
</span>
  <span>// open page
</span>  casper<span>.start('http://127.0.0.1:8080/');
</span>
  <span>// set your preferred view port size
</span>  casper<span>.viewport(1024, 768);
</span>
  casper<span>.then(function() {
</span>      <span>// take the screenshot of the whole body element and save it under "body.png". The first parameter is actually a CSS selector
</span>      phantomcss<span>.screenshot('body', 'body');
</span>  <span>});
</span>
  casper<span>.then(function now_check_the_screenshots() {
</span>    <span>// compare screenshots
</span>    phantomcss<span>.compareAll();
</span>  <span>});
</span>
  <span>// run tests
</span>  casper<span>.run(function() {
</span>    <span>console.log('\nTHE END.');
</span>    casper<span>.test.done();
</span>  <span>});
</span><span>});</span>

Da Sie den Test zum ersten Mal ausgeführt haben, erstellt er nur einen neuen Basis -Screenshot und führt keinen Vergleich durch. Gehen Sie voran und schauen Sie in den Screenshots -Ordner. Sie sollten ein Bild wie dieses sehen:

Dies ist der goldene Standard dafür, wie Ihre Website aussehen soll, und zukünftige Ausführungen des Tests werden ihre Ergebnisse mit diesem Bild vergleichen.

Einführung einer Regression

Wenn Sie denselben Testbefehl erneut ausführen, wird berichtet, dass alle Tests erfolgreich bestanden haben:

<span>"test": "casperjs test test.js"</span>

Dies ist zu erwarten, da wir auf der Website nichts geändert haben. Lassen Sie uns etwas brechen und die Tests erneut durchführen. Versuchen Sie, einige Stile in Index.html zu ändern, um beispielsweise die Größe der Blöcke auf 400 PX zu verringern. Führen Sie nun den Test noch einmal durch und sehen, was passiert:

<span>npm test</span>

Es sind einige wichtige Dinge hier passiert. Erstens berichteten Phantomcss, dass die Tests aufgrund einer Nichtübereinstimmung für Screenshot body_0.png fehlgeschlagen waren. Die Fehlanpassung wird bei 11,41%gemessen. Zweitens wurde der Unterschied zwischen der aktuellen und der vorherigen Version im Ordner fehlerhaft gespeichert. Wenn Sie es öffnen, sehen Sie einen Screenshot wie diesen:

Der Screenshot unterstreicht bequem die veränderten Bereiche, sodass es leicht ist, den Unterschied zu erkennen.

Akzeptieren Sie die Änderungen

Was sollten wir tun, um die Veränderung zu akzeptieren? Wir sollten irgendwie in der Lage sein, das Werkzeug zu sagen, dass wir uns an die reduzierte Breite der Blöcke halten und die aktuelle Ansicht als neuen Standard annehmen möchten. Dazu können Sie den Testbefehl mit einem zusätzlichen Argument -Rebas -Argument:

ausführen

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

Beachten Sie die beiden Doppelstriche. Es ist die Art und Weise von NPM, einen Parameter an den zugrunde liegenden Befehl zu übergeben. Der folgende Befehl führt also zu Casperjs -Test -Test.js -Rebase. Nachdem wir die Änderung akzeptiert haben, wird das vorherige Basisbild durch das neue ersetzt.

weitermachen

Jetzt, da Sie die Grundlagen haben, können Sie darüber nachdenken, dieses Tool in Ihren eigenen Workflow zu integrieren. Ich werde nicht auf die Details eingehen, da es ziemlich projektspezifisch ist, aber hier finden Sie einige Fragen, die Sie überlegen sollten:

Werden Sie die Tests gegen die reale Website oder einen Art von Style -Leitfaden durchführen, bei dem nur separate UI -Elemente vorhanden sind?
Hat Ihre Website dynamische Inhalte? Wenn ja, dann führen Änderungen im Inhalt dazu, dass die Tests brechen. Um dies zu vermeiden, müssen Sie eine separate Version der Website mit einem statischen Kontext einrichten, um die Tests dagegen auszuführen.
Werden Sie die Screenshots in Ihre Versionskontrolle hinzufügen? Ja, du solltest.
Wirst du Screenshots von ganzen Seiten oder getrennte Elemente machen?

Mit diesem Tool können Sie jetzt die visuellen Aspekte Ihrer Website mit automatisierten Tests abdecken. Mit Ihren bereits vorhandenen Einheiten und Funktionstests füllt diese neue Strategie eine enge Lücke in Ihrer Testgrenze. Auch wenn Sie noch neu im Testen sind, ist dies ein guter Ausgangspunkt!

häufig gestellte Fragen (FAQs) zu visuellen Regressionstests mit Phantomcss

Was ist Phantomcss und wie funktioniert es? Es funktioniert, indem es Screenshots Ihrer Webseiten entnimmt, sie mit Basisbildern verglichen und die Unterschiede hervorhebt. Auf diese Weise können Entwickler visuelle Inkonsistenzen auf ihren Webseiten schnell identifizieren und beheben. Phantomcs ist besonders nützlich in großen Projekten, bei denen manuelle Tests zeitaufwändig und fehleranfällig sein können.

Wie installiere ich Phantomcss? Manager. Sie können es global installieren, indem Sie den Befehl npm install -g -phantomcss ausführen. Alternativ können Sie es Ihrem Projekt als Entwicklungsabhängigkeit hinzufügen, indem Sie NPM-Installation-Save-Dev-Phantomcss ausführen.

Wie verwende ich Phantomcss für visuelle Regressionstests? Dieses Skript kann in JavaScript oder Coffeescript geschrieben werden. Sobald das Skript fertig ist, können Sie es mit Phantomjs ausführen. Phantomcss erfassen dann Screenshots der angegebenen Elemente, vergleichen sie mit den Basisbildern und generieren einen Bericht, der die Unterschiede zeigt. mit anderen Testframeworks wie Mokka, Jasmine und Qunit verwendet werden. Es kann auch in kontinuierliche Integrationssysteme wie Jenkins und Travis CI integriert werden. Es automatisiert den Prozess der Erfassung und Vergleich von Screenshots und spart den Entwicklern viel Zeit. Es bietet auch einen visuellen Bericht, der es einfach macht, Unterschiede zwischen Basis- und Testbildern zu erkennen. Darüber hinaus unterstützt Phantomcss Responsive Design -Tests und ermöglicht es Entwicklern, ihre Webseiten auf verschiedenen Bildschirmgrößen zu testen. Sie müssen lediglich die alten Basisbilder löschen und das Testskript erneut ausführen. PhantomCSS will capture new screenshots and use them as the new baseline images.

Can PhantomCSS handle dynamic content?

Yes, PhantomCSS can handle dynamic content. Es ermöglicht Entwicklern, eine Verzögerung vor dem Erfassen von Screenshots anzugeben, wodurch der dynamische Inhalt genügend Zeit zum Laden angibt. Es unterstützt auch die Verwendung von Rückrufen, um auf bestimmte Ereignisse zu warten, bevor Screenshots erfasst werden. Es kann Nachrichten an der Konsole protokollieren, fehlgeschlagene Tests als Bilddateien speichern und sogar ein Video des Testlaufs erstellen. Diese Funktionen erleichtern die Identifizierung und Behebung von Problemen in Ihren Tests.

Kann ich den Vergleichsprozess in Phantomcss anpassen? Sie können den Vergleichstyp, die Nichtübereinstimmungstoleranz und die Ausgabeinstellungen festlegen. Dies gibt Ihnen mehr Kontrolle über den Vergleichsprozess und ermöglicht es Ihnen, ihn auf Ihre spezifischen Bedürfnisse anzupassen. Visuelle Regressionstests, einschließlich Backstopjs, Wraith und Gemini. Diese Tools bieten ähnliche Funktionen wie Phantomcss, können je nach Ihren spezifischen Anforderungen unterschiedliche Stärken und Schwächen haben.

Das obige ist der detaillierte Inhalt vonVisuelle Regressionstests mit Phantomcss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!