Vendredi soir, vous mergez une refonte du header. Lundi matin, un collègue vous signale que le bouton de connexion a glissé de quelques pixels sur la page de pricing — une page que vous n'aviez même pas touchée. Aucun test n'a sonné l'alarme, parce qu'aucun test ne regardait l'apparence. C'est précisément le trou que le test visuel comble.
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 guide couvre l'installation, la configuration, les bonnes pratiques et l'intégration CI/CD.
toHaveScreenshot() vous oblige encore à écrire et maintenir du code ? Delta-QA capture et compare vos pages sans écrire une ligne de code, sans inscription et avec vos données qui restent en local. Essayer Delta-QA gratuitement →
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 vous épargner toute l'installation et la configuration, Delta-QA fait tout ça pour vous — 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 pour vous. Son moteur déterministe (mêmes entrées → mêmes résultats) est calibré sur la perception humaine : il ne signale que ce qu'un œil humain remarquerait et ignore le bruit de rendu. Pas besoin de jongler avec des pourcentages de pixels — l'outil distingue de lui-même un vrai bug d'un changement cosmétique.
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 les zones dynamiques sans configuration manuelle. Son moteur ne signale que ce qu'un œil humain remarquerait et écarte le contenu volatil comme le bruit de rendu — pas besoin de lui dire ligne par ligne où ne pas regarder.
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, c'est intégré : un moteur déterministe garantit que chaque capture est reproductible, peu importe les fonts qui traînent ou les animations en cours. Pas de waitForLoadState à implorer, pas de fonts.ready à supplier — l'attente du chargement complet est gérée pour vous.
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'outil capture et compare chaque résolution pour vous. 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.
toHaveScreenshot() vous demande encore d'écrire du code ? Delta-QA capture et compare vos pages en no-code, sans inscription et avec vos données qui restent en local. Essayer Delta-QA gratuitement →
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 régé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 moteur de comparaison visuelle déterministe qui va au-delà du pixel-à-pixel brut.
Envie de tester sans une ligne de TypeScript ni une seule baseline à régénérer ? Comparez vos pages avec Delta-QA dès maintenant, gratuitement et sans inscription. Essayer Delta-QA gratuitement →
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.