Visuelle Regressionstests mit Cypress und Percy: Ein umfassender Leitfaden

Einführung

Visuelle Regressionstests sind ein wesentlicher Bestandteil, um sicherzustellen, dass Ihre Webanwendung ihre visuelle Integrität im Laufe der Zeit beibehält. Bei der Weiterentwicklung von Anwendungen kann es zu unbeabsichtigten visuellen Änderungen kommen, die möglicherweise das Benutzererlebnis beeinträchtigen. Durch die Kombination von Cypress mit Percy, einem leistungsstarken visuellen Testtool, können Sie visuelle Regressionstests nahtlos automatisieren. In diesem Beitrag erfahren Sie, wie Sie Cypress und Percy einrichten und verwenden, um visuelle Unstimmigkeiten in Ihren Webanwendungen zu erkennen.

Warum visuelle Regressionstests wichtig sind

1. Benutzererfahrung: Stellt sicher, dass Änderungen an der Benutzeroberfläche sich nicht negativ auf die Benutzererfahrung auswirken.
2. Konsistenz: Behält die visuelle Konsistenz über verschiedene Versionen und Umgebungen hinweg bei.
3. Früherkennung:Erkennt unbeabsichtigte visuelle Veränderungen frühzeitig im Entwicklungsprozess.
4. Automatisierter Workflow: Integriert sich in CI/CD-Pipelines für kontinuierliche visuelle Tests.

Erste Schritte mit Cypress und Percy

Um mit visuellen Regressionstests mit Cypress und Percy zu beginnen, befolgen Sie diese Schritte:

Schritt 1: Cypress und Percy installieren
Stellen Sie zunächst sicher, dass Cypress in Ihrem Projekt installiert ist. Wenn nicht, können Sie es mit dem folgenden Befehl installieren:

npm install cypress --save-dev

Als nächstes installieren Sie die Percy-CLI und das @percy/cypress-Paket:

npm install --save-dev @percy/cli @percy/cypress

Schritt 2: Percy konfigurieren
Erstellen Sie ein Percy-Projekt im Percy-Dashboard. Nach der Erstellung erhalten Sie ein Percy-Projekt-Token. Legen Sie dieses Token als Umgebungsvariable fest:

export PERCY_TOKEN=<your_percy_project_token>

Schritt 3: Percy mit Cypress integrieren
Fügen Sie in Ihrer Datei cypress/support/index.js die folgende Zeile hinzu, um Percy zu importieren:

import '@percy/cypress';

Dadurch werden Percy-Befehle zu Cypress hinzugefügt, sodass Sie während Ihrer Tests visuelle Schnappschüsse machen können.

Visuelle Regressionstests schreiben

Lassen Sie uns einige visuelle Regressionstests mit Cypress und Percy schreiben. Wir beginnen mit einem einfachen Test, um einen visuellen Schnappschuss einer Webseite zu erfassen.

Beispiel: Aufnehmen eines visuellen Schnappschusses
Erstellen Sie eine neue Testdatei im Verzeichnis cypress/e2e, zum Beispiel visual-regression.spec.js, und fügen Sie den folgenden Code hinzu:

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should capture a visual snapshot of the homepage', () => {
        cy.percySnapshot('Homepage');
    });
});

In diesem Test:

• cy.visit('/'): Navigiert zur Stamm-URL der Anwendung.
• cy.percySnapshot('Homepage'): Erfasst einen visuellen Schnappschuss der Seite und nennt sie „Homepage“.

Beispiel: Testen einer bestimmten Komponente
Sie können auch visuelle Schnappschüsse bestimmter Komponenten oder Abschnitte einer Seite erfassen. Lassen Sie uns zum Beispiel einen Schnappschuss eines Anmeldeformulars aufnehmen.

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture a visual snapshot of the login form', () => {
        cy.get('.login-form').percySnapshot('Login Form');
    });
});

In diesem Test:

• cy.visit('/login'): Navigiert zur Anmeldeseite.
• cy.get('.login-form'): Wählt das Anmeldeformularelement aus.
• cy.percySnapshot('Login Form'): Erfasst einen visuellen Schnappschuss des Login-Formulars.

Erweiterte visuelle Regressionstests

Schnappschüsse in verschiedenen Zuständen aufnehmen
Sie können Schnappschüsse Ihrer Anwendung in verschiedenen Zuständen erfassen, beispielsweise nach Benutzerinteraktionen.

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture visual snapshots in different states', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.percySnapshot('Login Form - Filled');

        cy.get('button[type="submit"]').click();
        cy.percySnapshot('Dashboard');
    });
});

In diesem Test:

• Wir machen einen Schnappschuss des Anmeldeformulars, nachdem wir es ausgefüllt haben.
• Nach dem Anmelden machen wir einen weiteren Schnappschuss des Dashboards.

Ausführen visueller Regressionstests

Um Ihre visuellen Regressionstests auszuführen, verwenden Sie den folgenden Befehl:

npx percy exec -- cypress run

Dieser Befehl führt Cypress-Tests mit Percy durch und erfasst und vergleicht visuelle Schnappschüsse.

Überprüfung visueller Veränderungen

Nachdem die Tests ausgeführt wurden, lädt Percy die Schnappschüsse in das Percy-Dashboard hoch, wo Sie die visuellen Änderungen überprüfen können. Das Dashboard hebt alle Unterschiede zwischen den neuen Schnappschüssen und den Basisbildern hervor, sodass Sie Änderungen genehmigen oder ablehnen können.

Best Practices für visuelle Regressionstests

1. Isolieren Sie visuelle Elemente:Erfassen Sie Schnappschüsse isolierter Komponenten oder Abschnitte, um visuelle Änderungen effektiver zu erkennen.
2. Verwenden Sie beschreibende Snapshot-Namen:Verwenden Sie beschreibende Namen für Snapshots, um deren Identifizierung und Überprüfung zu erleichtern.
3. Integration mit CI/CD:Fügen Sie visuelle Regressionstests zu Ihrer CI/CD-Pipeline hinzu, um visuelle Änderungen bei jeder Bereitstellung automatisch zu erfassen.
4. Änderungen regelmäßig überprüfen:Änderungen im Percy-Dashboard regelmäßig überprüfen und genehmigen, um eine genaue visuelle Grundlinie aufrechtzuerhalten.

Abschluss

Visuelle Regressionstests mit Cypress und Percy sind eine leistungsstarke Methode, um sicherzustellen, dass Ihre Webanwendung ihre visuelle Integrität über einen längeren Zeitraum beibehält. Durch die Integration visueller Tests in Ihren Workflow können Sie unbeabsichtigte visuelle Veränderungen frühzeitig erkennen und beheben und so für ein konsistentes und ausgefeiltes Benutzererlebnis sorgen. Befolgen Sie die in diesem Leitfaden beschriebenen Schritte und Best Practices, um visuelle Regressionstests in Ihren Projekten einzurichten und zu nutzen.

Viel Spaß beim Testen!

Das obige ist der detaillierte Inhalt vonVisuelle Regressionstests mit Cypress und Percy: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!