Un guide des tests visuels avec Percy

Percy: automatiser les tests visuels pour la qualité de l'interface utilisateur sans couture

Cet article, créé en partenariat avec Percy, explore comment implémenter des tests visuels automatisés pour garantir que votre interface utilisateur (interface utilisateur) reste cohérente sur différents navigateurs et tailles d'écran. Alors que les tests d'unité et d'intégration vérifient la logique de l'application, ils manquent souvent des défauts visuels. Percy fournit une solution en automatisant le processus de capture et de comparaison des instantanés visuels, en soulignant les écarts et en rationalisant le processus de révision.

Ce tutoriel utilise une application à une seule page dirigée par API comme exemple pratique. Vous apprendrez comment Percy gère les données dynamiques et s'intègre à votre flux de travail pour des avis et approbations visuels efficaces.

Avantages clés de Percy:

• Détection précoce des problèmes d'interface utilisateur: attrape les bugs visuels manqués par les tests traditionnels, assurant une interface utilisateur cohérente entre les navigateurs et les tailles d'écran.
• Comparaison automatisée des instantanés: automatise la capture et la comparaison des instantanés visuels, mettant en évidence les différences pour une revue facile.
• Intégration simple: L'installation et l'intégration sont simples, similaires à la configuration des frameworks de test standard.
• Gestion des données dynamiques: Gère efficacement les UIS affichant des données dynamiques, empêchant les faux positifs des changements de données.
• flux de travail d'approbation rationalisé: facilite l'examen de l'équipe et l'approbation des changements visuels, assurant que seules les modifications prévues sont déployées.
• SDKS polyvalents: offre des SDK pour divers cadres de test, améliorant la compatibilité avec les environnements de développement existants.

Prérequis:

Ce tutoriel cible les développeurs JavaScript intermédiaires aux avancés familiers avec la syntaxe ES6, Express.js (pour les API RESTful), JQuery, Axios, CSSS Cadreworks, Git Branching Strategies et, idéalement, l'expérience avec les cadres de test. Un compte GitHub est requis. Nous utiliserons un exemple de devise disponible sur github.

Comprendre Percy:

Percy propose une plate-forme et un flux de travail pour les tests visuels des applications Web, des sites statiques et des bibliothèques de composants. Son plan gratuit comprend des membres de l'équipe illimités, 5 000 instantanés mensuellement (avec une histoire d'un mois) et des projets illimités. Le processus consiste à installer un SDK, à créer un tableau de bord du projet et à s'intégrer à votre base de code. Percy rend les instantanés dans Chrome et Firefox, soutenant jusqu'à dix résolutions d'écran.

Étapes d'implémentation:

1. Configuration du projet de démonstration: Fourk le référentiel github fourni et suivez les instructions ReadMe pour configurer l'application de la devise exemple.

2. Configuration du tableau de bord Percy Project: Inscrivez-vous pour un compte Percy gratuit, créez un projet ("Percy-tutorial") et liez-le à votre référentiel GitHub. Obtenez votre PERCY_TOKEN.

3. Génération d'instantanés Percy: Installez le package @percy/script (npm install -D @percy/script). Créer snapshots.js (voir l'article d'origine pour le code). Ce script utilise des marionnets pour interagir avec l'application et générer des instantanés pour chaque page. N'oubliez pas d'exécuter npm start dans un terminal séparé pour démarrer l'application avant d'exécuter le script Percy. Exécutez le script en utilisant export PERCY_TOKEN=<your_token> && npx percy exec -- node snapshots.js</your_token>.

4. Gestion des données dynamiques: Modifier snapshots.js pour intercepter les demandes d'API et remplacer les réponses par des données simulées pour assurer des instantanés cohérents. (Voir l'article d'origine pour le code mis à jour).

5. Flux de travail d'approbation: Créer une branche de fonctionnalité, faire des modifications visuelles, commettre, pousser, créer une demande de traction sur GitHub, exécuter les tests Percy, approuver la construction dans le tableau de bord Percy et fusionner la branche. Enfin, mettez à jour la branche maître et exécutez à nouveau Percy tests pour établir une nouvelle ligne de base.

Intégration continue (IC) et intégration SDK:

Percy s'intègre à diverses plates-formes CI / CD (Appveyor, pipelines azure, etc.) pour les tests automatisés. Il prend également en charge divers SDK pour l'intégration avec différents cadres de test (par exemple, Cypress). L'article original fournit un exemple d'intégration de cyprès.

Conclusion:

Percy améliore considérablement les tests d'interface utilisateur en automatisant le processus et en fournissant un flux de travail rationalisé pour examiner et approuver les changements visuels. En intégrant Percy dans votre processus de développement, vous pouvez réduire considérablement le risque de libérer des produits avec des défauts visuels. Les FAQ de l'article d'origine fournissent plus de détails sur les concepts de test visuels et les capacités de Percy.

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!