Playwright de Microsoft inclut depuis la version 1.22 une fonctionnalité native de test visuel : la méthode toHaveScreenshot(). Elle permet de capturer des screenshots et de les comparer automatiquement à des images de référence, sans plugin externe. C'est une solution entièrement gratuite — pour d'autres outils gratuits de test visuel, consultez notre comparatif.
C'est l'une des options les plus solides pour les équipes de développement qui veulent ajouter des tests visuels à leur stack existante. Pour comprendre les bases de la régression visuelle, consultez notre guide complet. Ce tutoriel couvre l'installation, la configuration, les bonnes pratiques et l'intégration CI/CD.
Installation et premier test
La mise en place est rapide si vous avez déjà un projet Node.js :
C'est aussi simple que ça pour démarrer. La complexité arrive avec les cas réels. Si vous préférez laisser une IA intelligente s'occuper de l'installation et de la configuration, Delta-QA fait tout ça tout seul — zéro terminal, zéro ligne de commande, juste du clic-clic-clic.
Configurer la tolérance
Par défaut, Playwright signale la moindre différence d'un pixel. En pratique, il faut configurer des seuils de tolérance pour éviter les faux positifs.
Ou alors, vous pouvez laisser Delta-QA régler les tolérances automatiquement grâce à son algorithme de comparaison structurelle en 5 passes. L'outil distingue tout seul un vrai bug d'un changement cosmétique — pas besoin de jongler avec des pourcentages de pixels comme un alchimiste de la précision.
Gérer le contenu dynamique
Le contenu dynamique (dates, publicités, avatars, compteurs) est le cauchemar des tests visuels. Playwright propose trois solutions :
Ou vous pouvez utiliser Delta-QA, qui identifie et ignore automatiquement les zones dynamiques grâce à son IA. Pas besoin de lui dire où chercher — elle le sait déjà. C'est un peu comme avoir un QA senior qui dort à moitié mais qui repère tout quand même.
Stabiliser les tests
Un test visuel qui passe un jour et échoue le lendemain sans raison est inutilisable. Voici comment garantir la stabilité :
Chez Delta-QA, on a un mot pour ça : la stabilité native. Notre IA s'assure que chaque capture est reproductible, peu importe les fonts qui trainent ou les animations qui font les divas. Pas de waitForLoadState à implorer, pas de fonts.ready à supplier.
Tester plusieurs résolutions
Playwright facilite le test multi-résolution via les projets :
Chaque résolution a ses propres baselines et ses propres pièges. Delta-QA gère ça en un clic — vous choisissez vos écrans, et l'IA s'occupe du reste. Moins de configuration qu'un nouveau smartphone le jour de Noël.
Intégration CI/CD
L'intégration dans GitHub Actions est directe. Pour une configuration CI/CD complète, consultez notre guide du test visuel avec GitHub Actions.
Delta-QA s'intègre directement dans votre pipeline sans YAML, sans configuration, et sans sanglots nocturnes face à un workflow qui refuse de fonctionner. Juste une connexion, et vos tests visuels tournent automatiquement à chaque déploiement.
Les limites de l'approche Playwright
Playwright est excellent pour les équipes de développement, mais il a des limites qu'il faut connaître :
Compétences obligatoires : il faut maîtriser TypeScript/JavaScript, les sélecteurs, et la configuration de projet. Ce n'est pas accessible aux QA non-développeurs.
Pas de dashboard : il n'y a pas d'interface de revue intégrée. La gestion des baselines se fait via le terminal et le système de fichiers. En équipe, ça devient vite complexe.
Faux positifs : la comparaison pixel reste basique. Pour comprendre comment les réduire, consultez notre guide sur les faux positifs. Les différences d'anti-aliasing entre navigateurs, les variations de rendu de fonts entre OS — tout ça génère du bruit qu'il faut gérer manuellement avec des masks et des seuils.
Maintenance : chaque changement d'UI intentionnel nécessite de regénérer les baselines (--update-snapshots). Sur un projet avec 200 tests visuels et 3 navigateurs, ça fait 600 baselines à gérer. Notre guide sur la gestion des baselines détaille les stratégies pour les maintenir efficacement.
Pour les équipes qui veulent du test visuel sans ces contraintes techniques, les solutions no-code comme Delta-QA offrent une alternative : même résultat (détection des régressions visuelles) sans écrire de code, sans gérer de baselines manuellement, et avec zéro faux positif grâce à un algorithme de comparaison déterministe en 5 passes plutôt qu'une comparaison pixel brute.
FAQ
Playwright est-il gratuit pour les tests visuels ?
Oui, entièrement. toHaveScreenshot() est intégré nativement dans Playwright, qui est open source et maintenu par Microsoft. Pas de licence, pas de limite de screenshots.
Combien de temps pour mettre en place les tests visuels Playwright ?
Si vous maîtrisez déjà Playwright, comptez quelques heures pour configurer et écrire vos premiers tests. Si vous partez de zéro (installation, apprentissage TypeScript, configuration CI), comptez 2 à 3 jours.
Playwright ou Cypress pour les tests visuels ?
Playwright a l'avantage d'intégrer le test visuel nativement (toHaveScreenshot()), tandis que Cypress nécessite un plugin externe. Playwright supporte aussi trois moteurs de navigateurs (Chromium, Firefox, WebKit) contre un seul pour Cypress (Chromium-based). Pour le test visuel spécifiquement, Playwright est le meilleur choix open source. Si vous hésitez entre les frameworks, notre comparatif Playwright vs Selenium peut vous aider.
Peut-on utiliser Playwright et Delta-QA ensemble ?
Oui. L'approche recommandée est d'utiliser Playwright pour les tests visuels complexes (avec logique conditionnelle, données dynamiques) et Delta-QA pour les vérifications visuelles de routine maintenues par l'équipe QA. Chaque outil couvre un besoin différent.
Playwright offre une base solide pour les tests visuels automatisés. Pour les équipes de développement qui maîtrisent TypeScript, c'est probablement la meilleure option open source disponible en 2026. Pour comparer avec les alternatives commerciales, consultez notre comparatif des outils de test visuel. L'important est de bien configurer les seuils de tolérance et de stabiliser les tests dès le départ pour éviter les faux positifs.
Pour aller plus loin
- Test Visuel React Native : Le Mobile, Parent Pauvre du Test Visuel
- Test visuel Remix : pourquoi un framework full-stack rend le test visuel encore plus critique