Testen auf visuelle Regressionen mit Percy

Obwohl dieser Beitrag *nicht* gesponsert ist (er basiert auf Pauls eigenen persönlichen Erfahrungen), haben wir bereits mit Percy an einem gesponserten Video gearbeitet, das ebenfalls den Prozess der Einrichtung von Percy auf einer Website durchläuft. Es ist faszinierend, mächtig und nützlich und ich kann es nur wärmstens empfehlen.

---

Lassen Sie mich die Bühne bereiten

1. Sie haben Code gepusht und alle sorgfältig geschriebenen Unit-Tests sind bestanden. Fantastisch! Bringen wir diesen Branch in die QA.
2. Sie erhalten eine Slack-Nachricht von Ihrem QA-Team, in der gefragt wird, warum ein Button vom Bildschirm schwebt?



3. „Aber... ich habe keinen Code in diesem Teil der Anwendung angefasst“, denken Sie sich.
4. Dann erinnern Sie sich, dass Sie *doch* etwas CSS geändert haben.
5. Panik! Was hat sich sonst noch in der UI geändert? Beeinträchtigt das das iPad? Verhält sich Firefox anders als Chrome? Was ist mit dem Handy?

Dies ist ein sehr häufiges Szenario, dem viele von uns bei der Entwicklung großer Anwendungen begegnen, die mit verschiedenen Bildschirmgrößen und Browsern umgehen. Es ist eine Herkulesaufgabe, die UI für jede einzelne Codeänderung zu testen.

Was nun, das Handtuch werfen und in die Berge ziehen? Zum Glück nicht. Wir haben Percy, das uns rettet! Und es ist wirklich unser bester Freund, wenn es um das Testen unerwarteter Ergebnisse geht, die Design und Layout beeinträchtigen. Percy ist zu einem unverzichtbaren Bestandteil meines Entwicklungsstacks geworden, und ich habe CSS-Tricks überzeugt, mich ein paar Dinge darüber erzählen zu lassen, die meinen Code gestärkt und Fehler verhindert haben.

Außerdem lässt es sich gut mit anderen Tools integrieren und ist relativ einfach einzurichten. Bleiben Sie also ein wenig bei mir, während wir uns ansehen, was Percy ist und wie Sie es für Ihre Projekte nutzen können.

Was genau ist Percy?

Laut Percys Website ist es eine „All-in-One-Plattform für visuelle Überprüfungen“.

Ich habe festgestellt, dass das stimmt. Im Grunde bietet Percy eine Möglichkeit, visuelle Regressionen zu testen. Das ist ziemlich großartig, wenn man darüber nachdenkt. Viele Änderungen an einer Codebasis – insbesondere bei der Arbeit mit CSS – können zu fehlerhaften Änderungen am Design einer Website führen. Wenn Sie jemals eine große Legacy-Stylesheet-Datei übernommen, eine Klasse geändert und auf Speichern geklickt haben, dann haben Sie wahrscheinlich eine gute Vorstellung davon, wie nervenaufreibend sich das anfühlen kann. Percys Ziel ist es, in solchen Situationen Vertrauen zu schaffen, in denen es schwierig ist, alle UI-Elemente zu kennen, die vom selben Code abhängen.

Aufgeregt? Fangen wir an.

Ein Beispiel-Website einrichten

Lassen Sie uns eine kleine Website einrichten, die Percy nutzen und die UI testen kann, die wir gemeinsam erstellen werden. Heutzutage ist das dank Gatsby und Netlify einfacher denn je. Es liegt weit außerhalb des Rahmens dieses Artikels, diese Technologien im Detail zu behandeln, aber seien Sie versichert, sie sind ebenfalls wunderbar und können uns ohne viel Server-Einrichtung online bringen.

Gehen Sie zu Netlify-Vorlagen und klicken Sie auf die Schaltfläche „Deploy to Netlify“, die ein Git-Repository auf Ihrem GitHub-Konto einrichtet und die Anwendung mit Netlify bereitstellt.

Nach Abschluss der Einrichtungsschritte sollten wir etwas Ähnliches wie hier sehen (nachdem die Website bereitgestellt wurde)

Magischerweise ist unsere Website jetzt live! Wir werden dies nutzen, um uns mit Percy vertraut zu machen.

Verwendung von CircleCI für automatisierte Tests

Percy funktioniert am besten in einer Continuous Integration (CI)-Umgebung, die Tests basierend auf einer Aktion auslöst. Wir werden CircleCI verwenden, um dies zu erreichen, indem wir uns in das GitHub-Repository der Beispiel-Website integrieren und die Builds ausführen, was uns ermöglicht, jeden Commit zu testen.

Als Erstes müssen wir unser neues Repository von GitHub klonen. Ich klone meins wie folgt

git clone https://github.com/PaulRyanStitcherAds/gatsby-starter-netlify-cms.git

Mit unserem nun geklonten Repository können wir zu CircleCI gehen und uns mit einem GitHub-Konto anmelden.

Wir müssen nun unser Projekt hinzufügen. Klicken Sie dazu in der Seitenleiste auf „Projekte hinzufügen“ und Sie sollten einen Bildschirm wie die folgende Bildschirmaufnahme sehen. Suchen Sie das Projekt, das wir gerade geklont haben, und klicken Sie auf „Projekt einrichten“.

Im Bereich **Projekt einrichten** möchten wir Linux als unser Betriebssystem und Ruby als unsere Sprache auswählen (percy-cli ist in Ruby). Hier sind die restlichen Schritte für diesen Teil

CircleCI teilt uns mit, dass wir ein .circleci-Verzeichnis und darin eine config.yml-Datei benötigen. Erstellen Sie diese Struktur in Ihrem Projekt.

CircleCI bietet einen Konfigurationsausschnitt zum Kopieren und Einfügen für unsere Konfiguration, aber er ist viel zu ausführlich für uns; wir benötigen nur eine einfache config.yml-Datei.

Verwenden Sie den folgenden Ausschnitt. Sie werden sehen, dass wir das percy-cli-Gem zusammen mit Percy in unseren Tests installieren

version: 2
jobs:
  build:
    docker:
      - image: circleci/ruby:2.4.1-node-browsers
    working_directory: ~/repo
    steps:
      - checkout
      - run:
          name: install dependencies
          command: |
            npm install
            gem install percy-cli
      
      - run: 
          name: run our tests
          command: |
            npm run build
            percy snapshot public

Diese Konfiguration ist alles, was wir brauchen.

Zuerst brauchte ich eine Weile, um herauszufinden, warum mein Build fehlschlug, und es stellte sich heraus, dass ich versucht hatte, percy-cli als npm-Modul zu installieren. Autsch!

Wir haben nun die CircleCI-Konfiguration eingerichtet, sodass wir endlich mit der Nutzung von Percy beginnen können!

Als Plausibilitätsprüfung kommentieren Sie den Schritt run our tests oben aus und pushen Sie Ihren Code auf den Master-Branch.

Klicken Sie nun auf die Schaltfläche „Build starten“, die die von Ihnen gerade gepushte Konfiguration verwendet, um einen Build zu erstellen. Hier sehen Sie, was im Workflow-Bereich passieren sollte

Von nun an wird CircleCI für uns einen Build erstellen, wann immer wir einen Push machen.

Percy an CircleCI anbinden

Ein Percy-Konto ist erforderlich, um den Dienst zu nutzen. Besuchen Sie die Percy-Website und melden Sie sich mit Ihrem GitHub-Konto an.

Nach der Anmeldung können Sie eine neue Organisation erstellen (falls Sie noch keine haben) und sie nennen, wie Sie möchten.

Als Nächstes fügen Sie der Organisation ein Projekt hinzu. Es ist wahrscheinlich eine gute Idee, das Projekt so zu nennen, dass es mit dem Namen des Repositorys übereinstimmt, damit es später erkennbar ist.

Nun müssen wir ein Percy-Token zu CircleCI hinzufügen. Percy-Tokens befinden sich unter „Projekteinstellungen“.

Okay, fügen wir das Token in CircleCI unter **Umgebungsvariablen** im Abschnitt „Build-Einstellungen“ hinzu. Sie finden die Build-Einstellungen, indem Sie auf das Zahnradsymbol neben Ihrem Projekt im Workflow-Bereich klicken.

Es ist Zeit, Percy auszuführen! Wenn Sie die Zeile run our tests in der Konfigurationsdatei zuvor auskommentiert haben, entfernen Sie den Kommentar, da dieser Befehl Percy ausführt. Pushen Sie erneut nach Master und gehen Sie dann zur Percy-App – wir werden sehen, dass Percy einen eigenen Build zum Erstellen von Snapshots gestartet hat. Wenn alles gut geht, sollten wir Folgendes erhalten

Wenn Sie auf diesen Build klicken, können Sie alle Bildschirme sehen, die Percy von der Anwendung geschnappt hat.

Sie fragen sich vielleicht, was es mit der leeren linken Spalte auf sich hat. Dort ist normalerweise der ursprüngliche Bildschirm, aber da dies der erste Test ist, informiert uns Percy, dass keine vorherigen Snapshots zum Vergleichen vorhanden sind.

Das Letzte, was wir tun müssen, um diese Verbindung abzuschließen, ist, unser Repository mit Percy zu verknüpfen. Klicken Sie also in Percy auf „Projekteinstellungen“ und dann auf den Link „Integration installieren“.

Wählen Sie die Organisation aus und klicken Sie auf „Für alle Repositorys installieren“.

Endlich! Wir können unser Repository verknüpfen.

Die wahre Stärke von Percy freischalten

Da wir nun alles eingerichtet haben, können wir sehen, wie Percy in einem Code-Review-Workflow eingesetzt werden kann! Als Erstes erstellen wir einen Branch von Master. Ich nenne meinen Branch „changing-color“.

Gehen Sie zur Datei /src/components/all.sass, ändern Sie Zeile 5 so, dass die Farbe pink verwendet wird, und pushen Sie die Änderung in das Repository. Das ist es, was wir in unserem visuellen Test bewerten werden.

Erstellen Sie einen Pull-Request für die Änderung in GitHub.

CircleCI führt für uns Checks durch, aber der, auf den wir uns konzentrieren, ist der Percy-Schritt. Es kann ein oder zwei Minuten dauern, bis Percy erscheint

Percy lässt uns wissen, dass wir die vorgenommenen Änderungen überprüfen müssen, in diesem Fall die Änderung von Rot zu Pink. Wir können die Auswirkungen dieser Änderung sehen

Obwohl die Änderungen auf der rechten Seite **rot** sind, werden die Bereiche hervorgehoben, die zu Pink geändert wurden. Mit anderen Worten, Rot zeigt die Änderung und nicht das tatsächliche Aussehen an.

Wir können uns das kurz ansehen und dann auf die Schaltfläche „Genehmigen“ klicken, was uns einen grünen Haken auf GitHub gibt und anzeigt, dass wir den Pull-Request zusammenführen können.

Das ist die wahre Stärke von Percy: Es ermöglicht uns, die Auswirkungen einer kleinen Änderung zu sehen und gibt uns die Möglichkeit, die Änderungen zu genehmigen.

Fantastisch! Wir haben nun einen Überblick darüber bekommen, wie Sie Percy in Ihren Projekten einrichten und CircleCI integrieren können. Ich hoffe wirklich, dass Ihnen dies in Zukunft viele Kopfschmerzen bei der Verwaltung Ihrer UI ersparen wird.