Ein Leitfaden für visuelle Tests mit Percy

Percy: Automatisierung des visuellen Tests für nahtlose UI -Qualität

Dieser in Zusammenarbeit mit Percy erstellte Artikel untersucht, wie automatisierte visuelle Tests implementiert werden, um sicherzustellen, dass Ihre Benutzeroberfläche (UI) über verschiedene Browser und Bildschirmgrößen konsistent bleibt. Während die Einheiten- und Integrationstests die Anwendungslogik überprüfen, verpassen sie häufig visuelle Defekte. Percy liefert eine Lösung, indem der Prozess des Erfassens und Vergleichs visueller Schnappschüsse, die Hervorhebung von Diskrepanzen und die Straffung des Überprüfungsprozesses.

Dieses Tutorial verwendet eine API-gesteuerte einseitige Anwendung als praktisches Beispiel. Sie erfahren, wie Percy dynamische Daten umgeht und sich in Ihren Workflow für effiziente visuelle Bewertungen und Genehmigungen integriert.

Hauptvorteile von Percy:

• Frühe Erkennung von UI -Problemen: fängt visuelle Fehler auf, die durch herkömmliche Tests übersehen werden, um eine konsistente Benutzeroberfläche über Browser und Bildschirmgrößen zu gewährleisten.
• Automatisierter Snapshot -Vergleich: automatisiert die Erfassung und Vergleich von visuellen Schnappschüssen und hebt Unterschiede für eine einfache Übersicht hervor.
• Einfache Integration: Installation und Integration sind unkompliziert, ähnlich wie das Einrichten von Standard -Test -Frameworks.
• Dynamische Datenhandhabung: verwaltet die Benutzeroberfläche mit dynamischen Daten effektiv und verhindert Fehlalpolitik durch Datenänderungen.
• Staffelungsgenehmigungsworkflow: erleichtert die Teamüberprüfung und Genehmigung visueller Änderungen und stellt sicher, dass nur beabsichtigte Änderungen eingesetzt werden.
• Vielseitige SDKs: bietet SDKs für verschiedene Test -Frameworks und verbessert die Kompatibilität mit vorhandenen Entwicklungsumgebungen.

Voraussetzungen:

Dieses Tutorial zielt auf fortgeschrittene JavaScript -Entwickler, die mit ES6 Syntax, Express.js (für erholsame APIs), JQuery, Axios, CSS -Frameworks, Git -Verzweigungsstrategien und idealerweise Erfahrung mit den Testframeworks vertraut sind. Ein GitHub -Konto ist erforderlich. Wir werden eine auf GitHub verfügbare Beispielwährungsanwendung verwenden.

Percy verstehen:

Percy bietet eine Plattform und einen Workflow für visuelle Tests von Web -Apps, statischen Websites und Komponentenbibliotheken. Der kostenlose Plan umfasst unbegrenzte Teammitglieder, 5.000 Schnappschüsse monatlich (mit einer einmonatigen Geschichte) und unbegrenzte Projekte. Der Prozess umfasst die Installation eines SDK, das Erstellen eines Projekt -Dashboards und die Integration in Ihre Codebasis. Percy macht Schnappschüsse in Chrome und Firefox und unterstützt bis zu zehn Bildschirmauflösungen.

Implementierungsschritte:

1. Einrichten des Demo -Projekts: gib das bereitgestellte Github -Repository und befolgen

2. Erstellen Sie das Percy-Projekt-Dashboard: Melden Sie sich für ein kostenloses Percy-Konto an, erstellen Sie ein Projekt ("Percy-Tutorial") und verknüpfen Sie es mit Ihrem Github-Repository. Erhalten Sie Ihr . PERCY_TOKEN

3. Erzeugen von Percy -Snapshots: Installieren Sie das -Paket (@percy/script). Erstellen Sie npm install -D @percy/script (siehe den ursprünglichen Artikel für den Code). In diesem Skript interagieren PUPPETER mit der Anwendung und generiert Snapshots für jede Seite. Denken Sie daran, snapshots.js in einem separaten Terminal auszuführen, um die Anwendung vor dem Ausführen des Percy -Skripts zu starten. Führen Sie das Skript mit npm start. export PERCY_TOKEN=<your_token> && npx percy exec -- node snapshots.js</your_token> aus

4. Dynamische Daten bearbeiten: api -api -Anforderungen ändern und Antworten durch Mockdaten ersetzen, um konsistente Schnappschüsse zu gewährleisten. (Siehe den ursprünglichen Artikel für den aktualisierten Code). snapshots.js

5. Genehmigungsworkflow: Erstellen Sie einen Feature -Zweig, nutzen Sie visuelle Änderungen, stellen Sie fest, schieben Sie eine Pull -Anfrage für Github, führen Sie Percy -Tests aus, genehmigen Sie den Build im Percy -Dashboard und verschmelzen die Filiale. Aktualisieren Sie schließlich die Master -Filiale und führen Sie Percy -Tests erneut durch, um eine neue Basislinie festzulegen.

kontinuierliche Integration (CI) und SDK -Integration:

Percy integriert sich für automatisierte Tests in verschiedene CI/CD -Plattformen (Appveyor, Azure Pipelines usw.). Es unterstützt auch verschiedene SDKs für die Integration mit verschiedenen Test -Frameworks (z. B. Cypress). Der ursprüngliche Artikel enthält ein Beispiel für die Zypressenintegration.

Schlussfolgerung:

Percy verbessert die UI -Tests erheblich, indem der Prozess automatisiert und einen optimierten Workflow zur Überprüfung und Genehmigung visueller Änderungen bereitgestellt wird. Durch die Integration von Percy in Ihren Entwicklungsprozess können Sie das Risiko der Freisetzung von Produkten mit visuellen Defekten erheblich verringern. Die FAQs im ursprünglichen Artikel enthält weitere Details zu visuellen Testkonzepten und Percys Funktionen.

Das obige ist der detaillierte Inhalt vonEin Leitfaden für visuelle Tests mit Percy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!