Die 5 besten Tools zum Testen der visuellen Regression

In den letzten Jahren ist mir der Begriff 'visueller Regressionstest' in Webentwicklungsgesprächen immer häufiger vorgekommen ... und das aus gutem Grund. Es verspricht einen enormen Mehrwert für diejenigen, die es satt haben, ihre Websites manuell auf Stilprobleme zu überprüfen.

Angesichts dieser wachsenden Beliebtheit scheint es, als würde jeden Monat ein neues Tool veröffentlicht, das eine beeindruckende Automatisierung der visuellen Regressionstests verspricht. Leider habe ich festgestellt, dass die meisten mehr Traum als Realität sind. Die Wahrheit ist, dass diese Art von Tests täuschend kompliziert sind.

besten schwarzen Freitag Angebote 2015 Laptops

Es gibt jedoch einige, die sich von der Masse abheben. Obwohl jedes seine Vor- und Nachteile hat, glaube ich, dass jedes Tool in dieser Liste einen Blick wert ist.



Ein kurzes Diagramm mit den wichtigsten Funktionen von fünf der beliebtesten visuellen Regressionswerkzeuge [zum Vergrößern auf das Symbol klicken]

Ein kurzes Diagramm mit den wichtigsten Funktionen von fünf der beliebtesten visuellen Regressionswerkzeuge [zum Vergrößern auf das Symbol klicken]

01. Gespenst

Wraith gibt es schon seit mehreren Jahren. Es war eines der ersten Tools in der Szene und es werden weiterhin Verbesserungen in der Funktionalität festgestellt. In seinem GitHub-Repo wurden über 200 Pull-Anforderungen geschlossen. Es ist das ideale Tool für alle, die sich in Ruby entwickeln.

Versuch es

Führen Sie in Ihrem Projektverzeichnis aus Wraith Setup . Dann renne wraith capture configs / config.yaml . Dadurch werden eine Reihe von Tests für zwei verschiedene Versionen der BBC-Homepage durchgeführt. Überprüfen Sie nach Abschluss Ihres Testlaufs Ihre Screenshot-Galerie, indem Sie die neu erstellte öffnen shot / gallery.html Seite in Ihrem Browser Ihrer Wahl.

Sie können Ihre Tests auch anpassen. In dem configs / config.yaml Datei können Sie die zu testenden Sites und Seiten aktualisieren sowie die Bildschirmbreiten und den Diff-Modus einstellen.

Vor-und Nachteile

  • Die YAML-Konfigurationsdatei ist einfach zu bearbeiten
  • Sie können zwei verschiedene URLs vergleichen
  • Die Installation kann schwierig sein, wenn Sie nicht mit Ruby vertraut sind
  • Das Ausführen von Interaktionen, die für einzelne Seiten spezifisch sind, kann schwierig sein

02. PhantomCSS

PhantomCSS ist eine weitere Veteranenoption und eine beliebte Wahl unter Frontend-Entwicklern. Seine Vertrautheit und Funktionalität machen PhantomCSS zu einer großartigen Wahl für Frontend-Leute, die beim Testen von Websites ihre Beine vertreten möchten. PhantomCSS basiert auf PhantomJS / CasperJS und erweitert die fantastische Funktionalität dieser beiden Tools.

Versuch es

Erstellen Sie eine neue JavaScript-Datei mit dem folgenden Code:

casper.start('http://the-internet.herokuapp.com/checkboxes') .then(function(){ phantomcss.screenshot('#checkboxes', 'before click'); casper.click('#checkboxes input:first-child'); phantomcss.screenshot('#checkboxes', 'after click'); });

Führen Sie dann Ihre Datei über die CapserJS-CLI aus: casperjs test myfile.js . Ihr Skript wird im Hintergrund ausgeführt und Ihre Bilder werden im gespeichert Screenshots Mappe.

Vor-und Nachteile

  • Viele Tutorials und Präsentationen dazu
  • Errichtet auf CasperJS und ermöglicht die Integration von Seitenaktionen in Tests
  • Tests beschränkt auf PhantomJS
  • Keine Schnittstelle zum Überprüfen / Verwalten von Screenshots

03. Zwillinge

Ich finde Gemini ansprechend, weil es traditionelle Selen-Tests in einer nicht allzu komplizierten Oberfläche verpackt. Wie bei PhantomCSS können Sie benutzerdefinierte Aktionen für Ihre Screengrabs definieren. Im Gegensatz zu PhantomCSS geht Gemini noch einige Schritte weiter und bietet Testsuiten, mit denen Sie Ihren Code besser organisieren können.

Versuch es

Ein ... kreieren .gemini.yml Datei mit folgendem Inhalt (Ersetzen der URL zu Ihrem Selenium Grid Server):

rootUrl: http://the-internet.herokuapp.com/checkboxes gridUrl: http://localhost:4444/wd/hub browsers: chrome: desiredCapabilities: browserName: chrome

Erstellen Sie dann eine Testdatei und legen Sie sie in der ab Zwillinge Ordner im Stammverzeichnis Ihres Projekts. Die Datei kann so einfach sein wie:

gemini.suite('yandex-search', function (suite) { suite.setUrl('/checkboxes') .setCaptureElements('#checkboxes') .capture('before click') .capture('after click', function(actions, find) { actions.click('#checkboxes input:first-child'); }); });

Erstellen Sie als Nächstes Ihre Basisbilder, indem Sie ausführen Zwillinge Update . Sie sollten einen Test bestanden sehen. Sie können einen Regressionstest über ausführen Zwillingstest , die die neuen Bilder mit denen vergleichen, die in der gespeichert sind Zwillinge / Bildschirme Verzeichnis.

Vor-und Nachteile

  • Mit der Selenium-Integration können Sie auf einer Vielzahl von Browsern und Geräten testen
  • Gut dokumentierte Seite mit verschiedenen Beispielen
  • Bietet einen Rahmen zum Sortieren von Tests in Suiten
  • Kein direkter Zugriff auf Selen, wodurch die Art der Aktionen, die Sie auf einer Seite ausführen können, eingeschränkt wird
  • Um denselben Test mit mehreren Auflösungen auszuführen, ist eine erweiterte Konfiguration erforderlich

04. WebdriverCSS

Erstens eine Einschränkung: Die Zukunft von WebdriverCSS ist ungewiss, da versucht wird, es durch ein aktuelleres Modul zu ersetzen. Trotzdem denke ich, dass es immer noch erwähnenswert ist, da dieselbe Grundstruktur bei der nächsten Implementierung beibehalten wird.

Wie Gemini bindet sich WebdriverCSS aufgrund seiner Funktionalität in Selenium ein. Es befindet sich auch auf einem anderen Tool: WebdriverIO. Da es Teil des WebdriverIO-Ökosystems ist, profitiert es von allem, was das Framework bieten muss. Dies umfasst Hunderte von Befehlen, die Sie vor und nach dem Aufnehmen von Screenshots an den Browser senden können.

WebdriverCSS lässt sich auch gut in Test-Frameworks wie Mocha, Jasmine und Cucumber.js integrieren. Wenn Sie die Konnektivität mit Cloud-Selenium-Diensten wie Sauce Labs und Browserstack hinzufügen, erhalten Sie eine voll funktionsfähige Funktionstestsuite mit visuellen Regressionstests als Krönung.

Versuch es

Erstellen Sie eine neue JavaScript-Datei ( test.js ) in Ihrem Projekt mit folgendem Inhalt:

eine Zeichnung in einen Vektor verwandeln
var client = require('webdriverio').remote({desiredCapabilities:{browserName: 'chrome'}}) require('webdrivercss').init(client, { screenWidth: [640,1024] }); var screenshotElement = [{ name: 'checkboxes', elem: '#checkboxes' }]; client.init() .url('http://the-internet.herokuapp.com/checkboxes') .webdrivercss('before-click', screenshotElement) .click('#checkboxes input:first-child') .webdrivercss('after-click', screenshotElement) .end();

Führen Sie den Test aus, indem Sie diesen Befehl in Ihre Befehlszeile eingeben: $ node test.js . Überprüfen Sie die erstellten Bilder, indem Sie das Kontrollkästchen aktivieren webdrivercss Mappe. Wenn Sie Ihren Test erneut ausführen und sich die Screenshots ändern, werden Sie feststellen, dass a diff Ordner wird hinzugefügt und die entsprechenden Diff-Bilder werden darin enthalten sein.

Vor-und Nachteile

  • Da WebdriverIO verwendet wird, können Sie alle Funktionen des Frameworks nutzen
  • Schnelle Konfiguration verschiedener Bildschirmauflösungen
  • Ermöglicht das Ausblenden / Maskieren bestimmter Bereiche des Screenshots
  • Die Zukunft ist ungewiss, da dieses spezielle Plugin nicht mehr offiziell gepflegt wird
  • Sie müssen lernen, wie Sie WebdriverIO verwenden

05. Spektrum

Im Gegensatz zu den anderen Tools in dieser Liste führt Spectre keine Tests durch. Stattdessen konzentriert es sich auf die Bereitstellung von Bildvergleichsfunktionen sowie eine Administrationsoberfläche zum Verwalten von Screenshots.

Bei normaler Verwendung würden Sie Spectre mit einem Tool wie WebdriverIO oder PhantomJS koppeln. Letzterer würde die Screenshots aufnehmen, während Spectre das Speichern und Verarbeiten von Bildern übernehmen würde. Ich bin ein Fan davon, da die Trennung von Bedenken es als Community einfacher macht, ein Testwerkzeug unserer Wahl zu haben, aber auch eine gemeinsame Administrationsoberfläche aufzubauen.

Versuch es

Öffnen Sie auf Ihrer Spectre-Website den Pfad / tests / new / . Von dort aus können Sie die Testinformationen anpassen und einen ersten Screenshot hochladen. Wechseln Sie nach dem Absenden Ihres Tests zur Hauptseite Ihrer Website, auf der ein erstelltes 'Testprojekt' zusammen mit einer Benachrichtigung über 1 bestanden angezeigt wird. Sie können auf einen der Links auf dieser Seite klicken, um weitere Informationen zum Test zu erhalten.

So speichern Sie Slices in Photoshop

Als nächstes gehen Sie zurück zu / tests / neu Seite und lade ein neues Bild hoch. Wenn Sie fertig sind, kehren Sie zur Hauptseite zurück und Sie werden sehen, dass Spectre den Vergleich ausgeführt hat und jetzt einen fehlgeschlagenen Test meldet.

Vor-und Nachteile

  • Saubere, benutzerfreundliche Oberfläche zum Verwalten von Screenshots
  • Versucht nicht, zu viele Dinge zu tun und konzentriert sich auf einen bestimmten Bereich der Testlandschaft
  • Erfordert Kenntnisse über die Einrichtung des Ruby-Servers
  • Sie müssen wissen, wie Sie Daten / Screenshots über eine REST-API senden

Lobende Erwähnungen

Es gibt einige Tools, die meiner Meinung nach erwähnenswert sind, auch wenn sie keinen Platz in der obigen Liste haben. Sie sind:

Eine umfassende Liste von Tools und Artikeln zu diesem Thema finden Sie unter visualregressiontesting.com .

Was als nächstes?

'Diese Liste ist großartig, aber können Sie mir nicht einfach sagen, welches Tool ich verwenden soll?' Ich höre dich fragen. Nun ... nein, denn es hängt stark davon ab, was Sie testen. Wenn Sie eine ziemlich einfache Site überprüfen, sind Wraith oder Gemini großartige Optionen. Wenn Sie jedoch Benutzeraktionen nachahmen müssen, ist WebdriverCSS oder PhantomCSS besser geeignet.

Wenn Sie sich nicht sicher sind, machen Sie sich keine Sorgen. Wählen Sie einfach eine aus und probieren Sie es aus. Egal für welches Tool Sie sich entscheiden, Sie werden wertvolle Lektionen über Frontend-Tests lernen und wie leistungsfähig (wenn auch kompliziert) es sein kann.

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 290; kauf es hier !

Zum Thema passende Artikel: