Tests de régression visuelle avec Cypress et Percy : un guide complet

Introduction

Les tests de régression visuelle sont un élément essentiel pour garantir que votre application Web conserve son intégrité visuelle au fil du temps. À mesure que les applications évoluent, des changements visuels involontaires peuvent se produire, affectant potentiellement l'expérience utilisateur. La combinaison de Cypress avec Percy, un puissant outil de test visuel, vous permet d'automatiser les tests de régression visuelle de manière transparente. Dans cet article, nous explorerons comment configurer et utiliser Cypress et Percy pour détecter les écarts visuels dans vos applications Web.

Pourquoi les tests de régression visuelle sont importants

1. Expérience utilisateur : Garantit que les modifications de l'interface utilisateur n'ont pas d'impact négatif sur l'expérience utilisateur.
2. Cohérence : Maintient la cohérence visuelle entre les différentes versions et environnements.
3. Détection précoce : Détecte les changements visuels involontaires dès le début du processus de développement.
4. Flux de travail automatisé : S'intègre aux pipelines CI/CD pour des tests visuels continus.

Premiers pas avec Cypress et Percy

Pour commencer les tests de régression visuelle à l'aide de Cypress et Percy, suivez ces étapes :

Étape 1 : Installer Cypress et Percy
Tout d’abord, assurez-vous que Cypress est installé dans votre projet. Sinon, vous pouvez l'installer à l'aide de la commande suivante :

npm install cypress --save-dev

Ensuite, installez la CLI Percy et le package @percy/cypress :

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

Étape 2 : Configurer Percy
Créez un projet Percy sur le tableau de bord Percy. Une fois créé, vous obtiendrez un jeton de projet Percy. Définissez ce jeton comme variable d'environnement :

export PERCY_TOKEN=<your_percy_project_token>

Étape 3 : Intégrer Percy à Cypress
Dans votre fichier cypress/support/index.js, ajoutez la ligne suivante pour importer Percy :

import '@percy/cypress';

Cela ajoutera des commandes Percy à Cypress, vous permettant de prendre des instantanés visuels pendant vos tests.

Rédaction de tests de régression visuelle

Écrivons quelques tests de régression visuelle en utilisant Cypress et Percy. Nous commencerons par un test simple pour capturer un instantané visuel d'une page Web.

Exemple : Capturer un instantané visuel
Créez un nouveau fichier de test dans le répertoire cypress/e2e, par exemple visual-regression.spec.js, et ajoutez le code suivant :

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

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

Dans ce test :

• cy.visit('/') : accède à l'URL racine de l'application.
• cy.percySnapshot('Homepage') : capture un instantané visuel de la page et la nomme « Page d'accueil ».

Exemple : tester un composant spécifique
Vous pouvez également capturer des instantanés visuels de composants ou de sections spécifiques d'une page. Par exemple, prenons un instantané d'un formulaire de connexion.

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');
    });
});

Dans ce test :

• cy.visit('/login') : accède à la page de connexion.
• cy.get('.login-form') : sélectionne l'élément du formulaire de connexion.
• cy.percySnapshot('Login Form') : capture un instantané visuel du formulaire de connexion.

Tests de régression visuelle avancés

Capturer des instantanés dans différents états
Vous pouvez capturer des instantanés de votre application dans différents états, par exemple après les interactions de l'utilisateur.

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');
    });
});

Dans ce test :

• Nous prenons un instantané du formulaire de connexion après l'avoir rempli.
• Nous capturons un autre instantané du tableau de bord après la connexion.

Exécution de tests de régression visuelle

Pour exécuter vos tests de régression visuelle, utilisez la commande suivante :

npx percy exec -- cypress run

Cette commande exécute des tests Cypress avec Percy, capturant et comparant des instantanés visuels.

Examen des changements visuels

Après avoir exécuté les tests, Percy télécharge les instantanés sur le tableau de bord Percy, où vous pouvez consulter les changements visuels. Le tableau de bord met en évidence toutes les différences entre les nouveaux instantanés et les images de base, vous permettant d'approuver ou de rejeter les modifications.

Meilleures pratiques pour les tests de régression visuelle

1. Isolez les éléments visuels : Capturez des instantanés de composants ou de sections isolés pour identifier plus efficacement les changements visuels.
2. Utilisez des noms descriptifs pour les instantanés : Utilisez des noms descriptifs pour les instantanés afin de faciliter leur identification et leur examen.
3. Intégrez avec CI/CD : Ajoutez des tests de régression visuelle à votre pipeline CI/CD pour détecter automatiquement les changements visuels à chaque déploiement.
4. Examinez régulièrement les modifications : Examinez et approuvez régulièrement les modifications dans le tableau de bord Percy pour maintenir une référence visuelle précise.

Conclusion

Les tests de régression visuelle avec Cypress et Percy sont un moyen puissant de garantir que votre application Web conserve son intégrité visuelle au fil du temps. En intégrant des tests visuels dans votre flux de travail, vous pouvez détecter et traiter rapidement les changements visuels involontaires, offrant ainsi une expérience utilisateur cohérente et soignée. Suivez les étapes et les bonnes pratiques décrites dans ce guide pour configurer et exploiter les tests de régression visuelle dans vos projets.

Bon test !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!