Mit Percy visuelles Testen zu einer Jekyll-Website hinzufügen

Visuelles Testen ist der automatisierte Prozess der Überprüfung von Software aus rein visueller Sicht. Anstatt den zugrunde liegenden Code zu testen, geht es beim visuellen Testen darum, was Endbenutzer tatsächlich sehen und mit dem sie interagieren.

Ähnlich wie beim funktionalen Testen passt visuelles Testen direkt in Ihren Stack und Workflow. Und mit Percy ist es einfach, Snapshots hinzuzufügen und visuelle Überprüfungen für alles durchzuführen, was in einem Browser läuft.

Lasst uns eine zu testende Anwendung einrichten

In diesem Tutorial klonen wir eine Beispiel-Jekyll-Website, fügen Percy-Snapshots hinzu, nehmen einige visuelle Änderungen vor und überprüfen diese in Percy.

Bevor wir Percy hinzufügen, richten wir unsere Beispielanwendung ein

git clone https://github.com/percy/example-percy-jekyll.git

Navigieren Sie zu Ihrer lokalen Anwendung, installieren Sie die Abhängigkeiten, erstellen und starten Sie dann die Website

cd example-percy-jekyll/
bundle install
bundle exec jekyll build
bundle exec jekyll serve

Hinweis: Ruby >= 2.3 ist erforderlich

Öffnen und klicken Sie sich lokal durch die Website, um zu sehen, wovon wir Percy-Snapshots erstellen werden.

Dank an CloudCannon für das Hydra-Theme.

Melden Sie sich als Nächstes, falls noch nicht geschehen, für ein kostenloses Percy-Konto an und erstellen Sie eine Organisation und ein neues Projekt

Percy-Projekte entsprechen der Webanwendung, der Komponentbibliothek oder der statischen Website, die Sie testen. In diesem Fall verbinden wir unser Percy-Projekt mit unserer Jekyll-Website.

Percy-Snapshots generieren

Um Ihre lokale Umgebung mit Ihrem neuen Percy-Projekt zu authentifizieren, kopieren Sie die Umgebungsvariable PERCY_TOKEN vom neuen Projektbildschirm oder Ihren Projekteinstellungen und führen Sie dann aus

$ export PERCY_TOKEN=aaabbbcccdddeee
$ npx percy snapshot _site/

Hinweis: Ersetzen Sie den Token unbedingt durch Ihren projektspezifischen Token.

Sie sehen eine Ausgabe wie diese

$ npx percy snapshot _site/
Downloading Chromium r662092 - 88.3 Mb [====================] 100% 0.0s 
[percy] created build #1: https://percy.io/jekyll-test-site/hydra-theme/builds/2048096
[percy] percy has started.
[percy] serving static site at https://:5339/
[percy] snapshot taken: '/404.html'
[percy] snapshot taken: '/index.html'
[percy] snapshot taken: '/about/index.html'
[percy] snapshot taken: '/blog/index.html'
[percy] snapshot taken: '/contact/index.html'
[percy] snapshot taken: '/contact-success/index.html'
[percy] snapshot taken: '/pricing/index.html'
[percy] snapshot taken: '/category/marketing/index.html'
[percy] snapshot taken: '/category/sales/index.html'
[percy] snapshot taken: '/category/tips/index.html'
[percy] snapshot taken: '/sales/2016/07/20/the-process-for-direct-sales/index.html'
[percy] snapshot taken: '/marketing/2016/08/12/the-history-of-marketing/index.html'
[percy] snapshot taken: '/sales/2016/08/06/definition-of-sales/index.html'
[percy] snapshot taken: '/sales/tips/2016/07/28/effective-upselling-techniques/index.html'
[percy] snapshot taken: '/sales/tips/2016/08/02/sales-effectiveness/index.html'
[percy] shutting down static site at https://:5339/
[percy] stopping percy...
[percy] waiting for 15 snapshots to complete...
[percy] done.
[percy] finalized build #1: https://percy.io/jekyll-test-site/hydra-theme/builds/2048096

Klicken Sie auf den Build-Link oder gehen Sie zu Ihrem Percy-Projekt, um Ihren ersten Build anzusehen.

Was passiert hinter den Kulissen?

Sobald npx percy snapshot _site/ aufgerufen wurde, hat Percy die DOM-Snapshots für jede Seite Ihrer Jekyll-Website erfasst. Percy hat dann die Snapshots neu erstellt, um sie mit Baseline-Snapshots zu vergleichen und zu bestimmen, welche Pixel sich geändert haben.

Da dies der erste Build ist, gibt es nichts zu vergleichen. Er wurde auch automatisch genehmigt, da der Commit auf master erfolgte und wir davon ausgehen, dass master-Builds produktionsreif sind.

Visuelle Änderungen vornehmen und überprüfen

Nachdem Sie Ihren ersten Build gesendet und eine Baseline zur Vergleiche der nächsten Snapshots erstellt haben, nehmen wir nun eine visuelle Änderung zur Überprüfung vor.

Nehmen wir eine weitreichende CSS-Änderung vor. Gehen Sie zur Datei cloudcannon.scss und ändern Sie die Markenfarben

$brand-color: #ff8a00;
$secondary-brand-color: #da1b60;

Da wir diese Änderungen direkt auf master pushen, stellen Sie sicher, dass Sie die automatische Genehmigung für master-Branches in Ihren Percy-Projekteinstellungen deaktivieren.

Sobald diese Änderungen gespeichert sind, erstellen Sie Ihre Website und führen Sie Percy erneut aus

$ bundle exec jekyll build
$ npx percy snapshot _site/

Gehen Sie zurück zu Percy oder klicken Sie auf den Percy-Build-Link, um die visuellen Änderungen zu sehen!

Wenn Sie nicht mitverfolgt haben, können Sie sich den Build ansehen.

Was passiert in der Percy-Benutzeroberfläche?

Die roten Bereiche im rechten Bereich stellen geänderte Pixel dar – die visuellen Unterschiede. Durch Klicken auf diesen Bereich (oder Drücken von "d") wechseln Sie zwischen dem zugrundeliegenden Snapshot und dem überlagerten Unterschied, sodass Sie leicht erkennen können, was sich genau geändert hat. Sie werden auch feststellen, dass die ersten paar Unterschiede abgeglichen und gruppiert wurden, um die Überprüfung einfacher und schneller zu machen.

Jeder Snapshot wurde in Chrome und Firefox sowie in mobilen und Desktop-Breiten gerendert. Das Rendern Ihrer Website in diesen Varianten hilft Ihnen, subtile Unterschiede zu erkennen, die durch Browser-Rendering oder responsive Fehler verursacht werden.

Da wir mit unserem neuen, frischen Look zufrieden sind, klicken Sie auf „Alle genehmigen“. ✅

Sie haben Ihre erste visuelle Überprüfung durchgeführt! Visuelles Testen ist nicht nur großartig, um visuelle Fehler zu erkennen, sondern auch, um die genauen Auswirkungen jeder Codeänderung zu kennen. Die Visualisierung Ihrer UI während Code-Reviews ist von unschätzbarem Wert und hilft Ihnen, Regressionen zu beheben, bevor sie in die Produktion gelangen, oder mit vollständiger Zuversicht bereitzustellen.

Snapshots konfigurieren

Sie können konfigurieren, wie und wo Percy für jeden Build ausgeführt wird, indem Sie eine globale .percy.yml-Datei im Stammverzeichnis Ihres Projekts erstellen.

Sie können die responsiven Breiten anpassen, in denen Ihre Snapshots gerendert werden. Wenn Sie beispielsweise einen superbreiten Snapshot zusätzlich zu unseren mobilen und Desktop-Breiten hinzufügen möchten

version: 1
snapshot:
	widths: [375, 1280, 1920]

Sie können auch bestimmte Seiten ignorieren. Wenn Sie beispielsweise mehrere Seiten mit dem gleichen Layout wie Blog-Kategorie-Posts ignorieren möchten

version: 1
static-snapshots:
	ignore-files: "/blog/category/*"

Erfahren Sie mehr über die Konfiguration des Percy SDK in unserer Dokumentation).

Percy in Ihren Workflow integrieren

Was wir bisher getan haben, zeigt, wie Percy Snapshots erstellt und visuelle Änderungen lokal erkennt. Um jedoch den größten Nutzen aus automatisierten visuellen Tests zu ziehen, empfehlen wir die Integration von Percy mit Ihrem CI-Dienst.

Für Anweisungen und um alle unsere unterstützten CI-Dienste zu sehen, lesen Sie unsere CI-Setup-Dokumentation. Hier sind einige unserer beliebtesten unterstützten Dienste

Visuelles Testen ist am besten, wenn es parallel zu Code-Reviews durchgeführt wird. Wir unterstützen Integrationen mit GitHub, GitLab und Bitbucket (bald verfügbar)! Mit einer aktivierten Integration wird Percy in Ihren Commit- und Pull-Request-Checks angezeigt und benachrichtigt Sie, wenn visuelle Änderungen erkannt werden

Durch Klicken auf „Details“ gelangen Sie direkt zum Percy-Build, wo Sie visuelle Änderungen überprüfen können.
Nachdem die Snapshots genehmigt wurden, ändert sich Ihr Commit-Status auf Grün und der Pull-Request kann zusammengeführt werden.

Mit kontinuierlichen visuellen Überprüfungen auf jedem Feature-Branch ist es einfach, 100%ige Sicherheit für die visuellen Änderungen zu haben, die Sie bereitstellen werden.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, sich mit der visuellen Review-Plattform und dem Workflow von Percy vertraut zu machen. Um mehr darüber zu erfahren, wie Percy funktioniert, können Sie sich gerne diese Dokumentation ansehen

Viel Spaß beim Testen! 💜