Découvrez comment mettre en œuvre des tests visuels frontend robustes avec Chromatic et Percy. Ce guide complet couvre l'installation, les meilleures pratiques et les techniques avancées.
Tests visuels frontend : Plongée approfondie dans l'intégration de Chromatic et Percy
Dans le paysage actuel du développement web rapide, garantir une interface utilisateur (UI) cohérente et visuellement attrayante sur divers navigateurs, appareils et tailles d'écran est primordial. Les tests d'interface utilisateur manuels, cependant, sont chronophages, sujets aux erreurs et ne parviennent souvent pas à détecter les régressions visuelles subtiles. C'est là que les tests visuels frontend interviennent, offrant une solution puissante pour automatiser les vérifications de l'interface utilisateur et maintenir l'intégrité visuelle tout au long du cycle de développement. Ce guide complet explore deux plateformes de test visuel de premier plan : Chromatic et Percy, détaillant leur intégration, leurs avantages et les meilleures pratiques pour les développeurs du monde entier.
Comprendre les tests visuels frontend
Les tests visuels frontend, également connus sous le nom de tests de régression visuelle ou de tests de capture d'écran, automatisent le processus de comparaison des captures d'écran de l'interface utilisateur par rapport à une base de référence pour détecter les changements visuels. Ils permettent aux développeurs d'identifier les changements inattendus dans l'interface utilisateur causés par des modifications de code, des mises à jour de conception ou des mises à jour de navigateur. Cette approche réduit considérablement le risque de publier des interfaces utilisateur visuellement défectueuses ou incohérentes pour les utilisateurs, améliorant ainsi l'expérience utilisateur.
Les avantages des tests visuels
- Détection précoce des erreurs : Détecte les bugs visuels tôt dans le cycle de développement, avant qu'ils n'atteignent la production.
- Qualité du code améliorée : Encourage les développeurs à écrire un code plus propre et plus facile à maintenir.
- Cycles de développement plus rapides : Automatise les processus de test, ce qui permet d'économiser du temps et des ressources.
- Expérience utilisateur améliorée : Garantit une interface utilisateur cohérente et visuellement attrayante sur toutes les plateformes.
- Efforts de test manuel réduits : Libère les équipes d'assurance qualité pour se concentrer sur des scénarios de test plus complexes.
- Confiance accrue dans les versions : Offre une plus grande assurance que l'interface utilisateur fonctionne comme prévu.
Présentation de Chromatic et Percy
Chromatic et Percy sont des plateformes de test visuel basées sur le cloud qui rationalisent le processus de test visuel. Les deux plateformes offrent des fonctionnalités similaires, y compris la génération de captures d'écran, la comparaison visuelle et l'intégration avec les pipelines CI/CD populaires. Cependant, elles possèdent également des caractéristiques et des atouts uniques. Plongeons dans chaque plateforme.
Chromatic
Chromatic, développé par Storybook, est profondément intégré à l'écosystème Storybook. Storybook est un outil puissant pour construire et documenter les composants UI de manière isolée. Chromatic étend les capacités de Storybook en offrant des fonctionnalités de test visuel et de révision. Il simplifie le processus de test des composants UI en permettant aux développeurs de capturer des captures d'écran de composants dans divers états et configurations. Chromatic compare ensuite ces captures d'écran à une base de référence, mettant en évidence toute différence visuelle.
Fonctionnalités clés de Chromatic :
- Intégration Storybook étroite : S'intègre de manière transparente à Storybook pour le développement et les tests pilotés par les composants.
- Génération automatique de captures d'écran : Génère automatiquement des captures d'écran des composants UI dans différents états.
- Comparaison visuelle : Compare les captures d'écran à une base de référence et met en évidence les changements visuels.
- Révision et collaboration : Fournit une interface collaborative pour l'examen et l'approbation des changements visuels.
- Intégration CI/CD : S'intègre aux pipelines CI/CD populaires, tels que Jenkins, CircleCI et GitHub Actions.
- Tests d'accessibilité : Fournit des vérifications d'accessibilité de base.
Percy
Percy, acquis par BrowserStack, est une plateforme de test visuel polyvalente qui prend en charge divers frameworks de test et workflows de développement. Elle permet aux développeurs de capturer des captures d'écran de pages entières, de composants spécifiques ou même de contenu dynamique. Les algorithmes de comparaison visuelle sophistiqués de Percy peuvent détecter les moindres divergences visuelles. Elle offre une plateforme complète pour gérer les régressions visuelles et assurer la cohérence de l'interface utilisateur.
Fonctionnalités clés de Percy :
- Prise en charge multiplateforme : Prend en charge divers frameworks de test, y compris Jest, Cypress et Selenium.
- Génération de captures d'écran : Capture des captures d'écran de pages entières, de composants spécifiques et de contenu dynamique.
- Comparaison visuelle : Compare les captures d'écran à l'aide d'algorithmes de comparaison visuelle avancés.
- Collaboration et révision : Fournit une interface collaborative pour l'examen et l'approbation des changements visuels.
- Intégration CI/CD : S'intègre aux pipelines CI/CD populaires.
- Tests de conception réactive : Prend en charge les tests de conceptions réactives sur différentes tailles d'écran et appareils.
- Tests de compatibilité de navigateur : Teste sur divers navigateurs et versions.
Mise en place des tests visuels avec Chromatic
Examinons le processus de mise en place des tests visuels à l'aide de Chromatic, en supposant que vous avez un projet Storybook configuré. Les étapes suivantes fournissent un aperçu général ; consultez la documentation officielle de Chromatic pour les instructions les plus récentes. L'exemple est basé sur une configuration React et Storybook ; des concepts similaires s'appliquent à d'autres frameworks.
Prérequis
- Un projet Storybook configuré avec des composants.
- Un compte Chromatic (gratuit ou payant).
- Node.js et npm ou yarn installés.
Installation et Configuration
- Installez le CLI Chromatic :
npm install -g chromatic - Authentifiez-vous avec Chromatic :
Ceci vous invitera à vous connecter à votre compte Chromatic. Il configurera ensuite la configuration requise.
chromatic login - Exécutez Chromatic :
Chromatic construira votre Storybook et le téléchargera sur la plateforme Chromatic. Il prendra ensuite des captures d'écran de vos composants et les comparera à une base de référence.
chromatic - Examinez et approuvez les modifications : Chromatic fournira un lien vers l'interface Chromatic, où vous pourrez examiner toutes les modifications visuelles détectées. Vous pourrez ensuite approuver ou rejeter les modifications.
- Intégration avec CI/CD : Intégrez Chromatic dans votre pipeline CI/CD (par exemple, GitHub Actions, GitLab CI) pour des tests automatisés sur chaque demande de tirage (pull request). Les étapes varient en fonction du service CI/CD que vous utilisez ; référez-vous à la documentation Chromatic pour des instructions détaillées. Par exemple, en utilisant GitHub Actions, vous pouvez ajouter une tâche à votre fichier de workflow qui exécute Chromatic après que votre build et vos tests unitaires sont passés.
Exemple : Intégration de Chromatic avec GitHub Actions
Créez un nouveau fichier de workflow (par exemple, .github/workflows/chromatic.yml) avec le contenu suivant (ajustez le `CHROMATIC_PROJECT_TOKEN` à votre jeton de projet) :
name: Chromatic
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
chromatic-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Publish to Chromatic
run: |
npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # Utiliser un secret pour stocker le jeton
Ce workflow déclenchera Chromatic à chaque push et pull request sur la branche `main`. N'oubliez pas de remplacer `CHROMATIC_PROJECT_TOKEN` par votre véritable jeton de projet Chromatic stocké en tant que secret GitHub.
Mise en place des tests visuels avec Percy
La mise en place des tests visuels avec Percy implique des étapes similaires à Chromatic, mais se concentre sur l'intégration avec votre framework de test existant. Voici un guide général, avec des instructions spécifiques dépendant de votre framework (par exemple, React avec Jest, Vue avec Cypress).
Prérequis
- Un compte Percy (gratuit ou payant).
- Un framework de test (par exemple, Jest, Cypress, Selenium).
- Node.js et npm ou yarn installés.
Installation et Configuration
- Installez le CLI Percy :
npm install -D @percy/cli - Authentifiez-vous avec Percy : Créez un projet Percy au sein de la plateforme Percy et obtenez le jeton de votre projet. Vous définirez ce jeton comme une variable d'environnement (par exemple, `PERCY_TOKEN`) dans votre configuration CI/CD.
- Intégrez Percy à votre framework de test :
Cela implique l'ajout de commandes Percy à vos scripts de test. Les étapes exactes varient en fonction de votre framework de test. Par exemple, avec Cypress, vous installeriez le package `@percy/cypress` et ajouteriez une commande pour prendre des instantanés Percy. Avec Jest, vous utiliserez probablement directement l'API Percy ou un adaptateur dédié.
Exemple utilisant Cypress (dans vos tests Cypress - par exemple,
cypress/integration/my_spec.js) :it('should render the homepage', () => { cy.visit('/'); cy.percySnapshot('Homepage'); });Dans l'exemple Cypress ci-dessus,
cy.percySnapshot('Homepage')prend une capture d'écran de l'état actuel de la page et la télécharge sur Percy. - Configurez l'intégration CI/CD :
Dans votre configuration CI/CD, assurez-vous que Percy s'exécute après la fin de vos tests. Vous définirez généralement la variable d'environnement `PERCY_TOKEN` puis exécuterez la commande CLI Percy.
Exemple utilisant GitHub Actions (dans votre fichier de workflow) :
jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci - name: Run tests run: npm test # Remplacer par votre commande de test - name: Percy Snapshot if: github.event_name == 'pull_request' # Exécuter Percy uniquement sur les pull requests run: | npx percy snapshot --token $PERCY_TOKEN env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} # Utiliser un secret GitHub - Examinez et approuvez les modifications :
Percy fournira un lien vers sa plateforme, où vous pourrez examiner les différences visuelles et approuver ou rejeter les modifications.
Bonnes pratiques pour les tests visuels
Des tests visuels efficaces nécessitent une approche réfléchie. Voici quelques bonnes pratiques pour maximiser leurs avantages :
1. Définir des bases de référence claires
Établissez une base de référence bien définie. C'est l'état initial de votre interface utilisateur, par rapport auquel toutes les futures captures d'écran seront comparées. Assurez-vous que cette base de référence reflète fidèlement l'apparence visuelle souhaitée de votre application. Examinez et mettez à jour régulièrement vos bases de référence pour vous assurer qu'elles sont à jour et qu'elles reflètent les changements de conception en cours.
2. Concentrez-vous sur les éléments d'interface utilisateur critiques
Priorisez le test des éléments d'interface utilisateur et des flux d'utilisateurs les plus critiques. Cela inclut les éléments qui sont fréquemment utilisés, qui ont un impact significatif sur l'expérience utilisateur ou qui sont sujets à des changements. N'ayez pas besoin de tester chaque pixel ; concentrez-vous sur les zones qui comptent le plus pour vos utilisateurs.
3. Testez dans différents environnements
Testez votre interface utilisateur dans une variété d'environnements, y compris différents navigateurs (Chrome, Firefox, Safari, Edge, etc.), appareils (ordinateurs de bureau, tablettes, smartphones) et tailles d'écran. Cela aidera à garantir que votre interface utilisateur s'affiche de manière cohérente sur toutes les plateformes.
4. Gérer le contenu dynamique
Si votre interface utilisateur contient du contenu dynamique (par exemple, des données récupérées à partir d'API), vous devrez le gérer avec soin. Envisagez des techniques telles que la simulation des réponses API pour créer des données de test prévisibles ou l'utilisation d'ensembles de données déterministes. Assurez-vous d'avoir une stratégie pour gérer de manière cohérente le contenu dynamique entre les différentes builds.
5. Aborder les tests instables (flaky tests)
Les tests instables sont des tests qui réussissent parfois et échouent d'autres fois. Ceux-ci peuvent être une source majeure de frustration. Identifiez et corrigez les causes profondes des tests instables. Cela peut impliquer l'ajustement de vos configurations de test, l'augmentation des délais d'attente ou l'amélioration de la fiabilité de vos données de test. Si un test ne parvient pas à passer de manière cohérente, investissez du temps pour déboguer et résoudre le problème. N'ignorez pas simplement les échecs.
6. Intégrer avec CI/CD
Intégrez votre processus de test visuel dans votre pipeline CI/CD. Cela vous permet d'exécuter automatiquement des tests visuels à chaque modification de code, garantissant que toute régression visuelle est détectée tôt dans le cycle de développement. L'automatisation est essentielle pour gagner du temps et réduire le risque d'erreur humaine.
7. Utiliser un environnement de test cohérent
Assurez-vous que votre environnement de test est aussi cohérent que possible avec votre environnement de production. Cela inclut l'utilisation des mêmes navigateurs, systèmes d'exploitation et polices. Un environnement cohérent améliorera la précision de votre comparaisons visuelles.
8. Documentez votre stratégie de test
Documentez votre stratégie de test visuel, y compris les composants testés, les environnements de test et les résultats attendus. Cette documentation aidera à garantir que votre processus de test est cohérent et maintenable dans le temps. Ceci est particulièrement crucial pour l'intégration de nouveaux membres d'équipe ou lors de changements significatifs de votre interface utilisateur.
9. Prioriser l'accessibilité
Bien que Chromatic et Percy offrent un certain niveau de vérification de l'accessibilité, priorisez les tests d'accessibilité. Intégrez les vérifications d'accessibilité dans vos tests visuels pour vous assurer que votre interface utilisateur est accessible à tous les utilisateurs. Consultez les directives WCAG.
10. Examiner et mettre à jour régulièrement les tests
À mesure que votre interface utilisateur évolue, examinez et mettez à jour régulièrement vos tests visuels. Cela inclut la mise à jour des bases de référence, l'ajout de nouveaux tests pour les nouvelles fonctionnalités et la suppression des tests pour les composants obsolètes. Cela garantit que vos tests continuent d'apporter de la valeur.
Choisir la bonne plateforme : Chromatic vs. Percy
Le meilleur choix entre Chromatic et Percy dépend de vos besoins spécifiques et de la configuration de votre projet :
Considérez Chromatic si :
- Vous utilisez déjà Storybook pour le développement piloté par les composants.
- Vous souhaitez une intégration étroite avec les fonctionnalités de Storybook.
- Vous préférez une configuration rationalisée et une facilité d'utilisation, en particulier si vous avez une configuration Storybook existante.
- Vous souhaitez des vérifications d'accessibilité intégrées.
Considérez Percy si :
- Vous utilisez un framework de test autre que Storybook, tel que Jest, Cypress ou Selenium.
- Vous avez besoin d'une prise en charge pour un éventail plus large de scénarios de test.
- Vous avez besoin de fonctionnalités avancées comme les tests de conception réactive ou les tests de compatibilité de navigateur.
- Vous préférez une solution plus agnostique au framework.
Chromatic et Percy sont tous deux d'excellents choix pour les tests visuels. Évaluez les plateformes en fonction de vos outils existants, des exigences de votre projet et des préférences de votre équipe. Envisagez de commencer par un essai gratuit ou un plan gratuit pour évaluer les fonctionnalités et les capacités. De nombreuses équipes utilisent même les deux outils pour différentes parties du projet.
Techniques avancées et intégrations
Au-delà des bases, les plateformes de test visuel offrent des techniques avancées pour répondre à des scénarios d'interface utilisateur plus complexes et à des intégrations avec d'autres outils de développement.
1. Tester le contenu dynamique : Simulation d'API
L'un des plus grands défis des tests visuels est la gestion du contenu dynamique. Pour y remédier, envisagez de simuler les réponses d'API afin de garantir que les données de test sont prévisibles. Cela vous permettra de capturer des captures d'écran cohérentes et d'éviter les faux positifs ou négatifs causés par des données en constante évolution. Tirez parti d'outils tels que Mock Service Worker (MSW) ou la fonctionnalité de simulation de Jest pour simuler les appels API.
2. Tester les composants d'interface utilisateur interactifs
Pour tester les composants d'interface utilisateur interactifs (par exemple, menus déroulants, modales), vous devez souvent simuler les interactions de l'utilisateur. Cela peut impliquer de déclencher des événements par programmation (par exemple, clics, survols, entrées clavier) à l'aide de votre framework de test. Des outils tels que Cypress peuvent simuler le comportement de l'utilisateur plus directement.
3. Intégration des tests d'accessibilité
Intégrez des outils de test d'accessibilité (par exemple, axe-core) à vos tests visuels. Chromatic et Percy peuvent fournir des vérifications d'accessibilité de base ; pour des tests plus avancés, envisagez d'exécuter un audit d'accessibilité dans le cadre de votre pipeline de test et d'intégrer ces résultats à vos résultats de tests visuels. Cela contribuera à garantir que votre interface utilisateur est accessible à tous les utilisateurs. L'accessibilité ne consiste pas seulement à rendre l'interface utilisateur accessible, mais à assurer une conception inclusive pour les utilisateurs ayant des besoins divers.
4. Bibliothèques de composants UI
Les tests visuels sont particulièrement utiles lorsque vous travaillez avec des bibliothèques de composants UI (par exemple, Material UI, Ant Design). Créez des tests visuels pour chaque composant de votre bibliothèque afin d'assurer la cohérence et d'éviter les régressions visuelles lors de la mise à jour de la bibliothèque ou de son intégration dans vos projets.
5. Intégration avec les systèmes de conception
Si vous utilisez un système de conception, liez vos tests visuels à la documentation de votre système de conception. Cela vous permettra d'identifier rapidement toute incohérence visuelle entre votre interface utilisateur et les spécifications de votre système de conception. Synchronisez les composants UI avec les composants du système de conception. Cela aidera à maintenir la cohérence de la conception de vos produits.
Considérations relatives à l'accessibilité
L'accessibilité doit être un élément central de votre stratégie de test visuel. Bien que Chromatic et Percy offrent des vérifications d'accessibilité de base, vous devriez mettre en œuvre des audits d'accessibilité complets dans le cadre de votre processus de test.
1. Outils de test d'accessibilité automatisés
Utilisez des outils de test d'accessibilité automatisés comme Axe, Lighthouse ou Pa11y dans votre pipeline CI/CD. Ces outils analysent votre interface utilisateur à la recherche de violations d'accessibilité et fournissent des rapports détaillés sur les problèmes détectés.
2. Tests d'accessibilité manuels
Complétez les tests automatisés par des tests manuels. Effectuez des vérifications manuelles à l'aide de lecteurs d'écran (par exemple, JAWS, NVDA, VoiceOver), de la navigation au clavier et d'analyseurs de contraste des couleurs pour identifier tout problème que les outils automatisés pourraient manquer. Envisagez d'engager des consultants en accessibilité pour effectuer des audits complets.
3. Revues de code
Intégrez les revues d'accessibilité dans votre processus de revue de code. Demandez aux développeurs de revoir le code des autres pour détecter les problèmes d'accessibilité. Éduquez votre équipe sur les meilleures pratiques d'accessibilité et encouragez-la à être attentive à l'accessibilité tout au long du processus de développement.
Conclusion : L'avenir des tests visuels frontend
Les tests visuels frontend ne sont plus un luxe mais une nécessité pour le développement web moderne. En intégrant des plateformes comme Chromatic et Percy dans votre workflow, vous pouvez améliorer considérablement la qualité, la cohérence et la maintenabilité de votre interface utilisateur. L'utilisation de plateformes de test visuel est appelée à croître à mesure que la complexité de l'interface utilisateur augmente et que la demande d'applications web conviviales, réactives et accessibles continue. À mesure que le web continue d'évoluer, les tests visuels deviendront encore plus critiques dans le processus de développement.
En suivant les meilleures pratiques décrites dans ce guide et en restant à jour avec les dernières avancées en matière de tests visuels, vous pouvez créer une expérience utilisateur plus robuste, fiable et visuellement attrayante pour vos utilisateurs du monde entier. Évaluez régulièrement votre stratégie de test, restez informé des nouveaux outils et techniques, et adaptez-vous aux exigences en constante évolution du paysage du développement frontend. L'amélioration continue est essentielle pour un succès continu dans les tests visuels.