TECHNOLOGIES
Playwright, notre outil de tests end-to-end
Playwright est un framework de tests E2E open source développé par Microsoft. Il nous permet de simuler les interactions utilisateurs dans un vrai navigateur et de valider que chaque parcours critique fonctionne correctement.
Chez SmartBooster, Playwright est notre outil de référence pour les tests de bout en bout : couverture des parcours métier, tests multi-navigateurs et intégration dans notre pipeline GitLab CI/CD.
PRÉSENTATION
Qu'est-ce que Playwright ?
Playwright est un framework de tests end-to-end open source créé par Microsoft. Il pilote de vrais navigateurs (Chromium, Firefox, WebKit) de façon programmatique pour simuler exactement ce qu'un utilisateur ferait sur votre application.
Contrairement aux tests unitaires qui vérifient des fonctions isolées, les tests Playwright valident l'application complète : rendu de l'interface, appels API, transitions de page, gestion des erreurs. C'est la couche de test la plus proche du comportement réel de l'utilisateur.
Playwright s'intègre nativement avec nos projets Vue.js et TypeScript. Il supporte les pages rendues par Vite, les Single Page Applications et les applications hybrides Symfony + Vue.js via Inertia.js.
POURQUOI PLAYWRIGHT
Ce qui en fait notre outil de tests E2E de référence
Playwright résout les problèmes classiques des tests end-to-end : tests fragiles, synchronisation difficile, couverture multi-navigateurs coûteuse et débogage opaque.
Validation des parcours critiques
Playwright simule un vrai utilisateur dans le navigateur. Chaque parcours critique — connexion, saisie de formulaire, validation métier — est vérifié automatiquement avant chaque mise en production.
Multi-navigateurs natif
Un seul test, trois moteurs : Chromium, Firefox et WebKit (Safari). Aucune régression ne passe entre navigateurs sans être détectée, sans multiplier le code de test.
Rapidité et fiabilité
Playwright attend automatiquement que les éléments soient interactibles avant d'agir. Pas de sleep arbitraires, pas de tests flaky qui échouent aléatoirement selon la vitesse du serveur CI.
Tests API inclus
Au-delà de l'interface, Playwright peut tester directement les endpoints API de nos applications Symfony. Un outil unique pour les tests UI et les tests d'intégration API, sans jongler entre plusieurs bibliothèques.
TypeScript natif
Les tests Playwright s'écrivent en TypeScript avec une autocomplétion complète. Le même langage que nos composants Vue.js, des types corrects dès l'écriture et des refactorings sûrs.
Captures et traces de débogage
En cas d'échec, Playwright génère une capture d'écran, une vidéo et une trace complète de l'exécution. Le débogage d'un test raté se fait en quelques secondes depuis l'interface Trace Viewer.
NOTRE USAGE
Comment nous utilisons Playwright chez SmartBooster
Nous intégrons Playwright dans les projets Vue.js et Symfony dès lors que des parcours utilisateurs critiques doivent être couverts et que l'application est déployée en continu.
Playwright s'intègre également avec Storybook : nous l'utilisons pour générer des captures d'écran automatiques des composants documentés, servant à la fois de référence visuelle et de détection de régression sur l'interface.
Parcours utilisateurs critiques
Nous identifions les parcours à fort enjeu métier (authentification, tunnel de commande, soumission de formulaires complexes) et les couvrons avec des scénarios Playwright. Ces tests constituent le filet de sécurité principal avant chaque déploiement.
Intégration CI/CD GitLab
Les tests Playwright s'exécutent automatiquement dans notre pipeline GitLab CI/CD à chaque push sur la branche principale. Un test en échec bloque le déploiement et alerte l'équipe immédiatement. En pratique, nous nous autorisons à livrer sans relancer l'intégralité des tests lorsque la réactivité prime — la couverture E2E reste un filet, pas un frein.
Tests de régression sur les composants Vue.js
En complément des tests unitaires Vitest et de la documentation interactive Storybook (qui permet également d'exécuter des tests sur les composants isolés), Playwright valide que les composants Vue.js s'affichent et se comportent correctement dans le contexte applicatif complet, avec les vraies données et les vraies interactions.
MIGRATION
Migrer de Cypress à Playwright
Nous utilisions Cypress pour nos tests end-to-end avant de migrer vers Playwright. Le changement a été motivé par trois limites concrètes de Cypress que nous rencontrions au quotidien : l'absence de support WebKit, des pipelines CI lents sur les grosses suites et l'impossibilité d'intégrer nativement les tests avec Storybook.
Tests multi-navigateurs sans surcoût
Cypress ne supporte officiellement que Chromium (Chrome, Edge) et Firefox — WebKit/Safari est absent. Playwright teste les trois moteurs dans le même runner, sans licence ni service tiers. Une régression Safari est détectée en CI sans changer une ligne de code.
Architecture out-of-process plus rapide
Cypress s'exécute dans le navigateur avec le code de l'application, ce qui engendre des limitations et des lenteurs sur les suites volumineuses. Playwright pilote le navigateur depuis l'extérieur via le protocole CDP, ce qui le rend plus rapide et stable sur les pipelines CI avec de nombreux tests.
Intégration native avec Storybook
Playwright s'intègre directement avec Storybook via @storybook/test-runner. Concrètement, chaque story devient un test : Playwright navigue vers la story, la rend dans un vrai navigateur et vérifie qu'elle s'affiche sans erreur. On peut aussi générer des captures d'écran automatiques de chaque composant pour détecter les régressions visuelles entre deux builds, sans outillage visuel dédié supplémentaire.
Migration progressive depuis Cypress
Playwright dispose d'un outil de migration officiel (playwright codegen) qui enregistre les interactions et génère les tests correspondants. Nous avons migré nos suites Cypress existantes en commençant par les parcours critiques, en faisant cohabiter les deux outils le temps de la transition sans bloquer les déploiements.
Pour aller plus loin
Documentation utile
Documentation complète, guides de démarrage et référence API pour Playwright.
Guide d'installation et premiers tests en TypeScript, avec configuration recommandée.
Pour aller plus loin
Approfondir votre réflexion
Playwright couvre les tests E2E, Vitest couvre les tests unitaires Vue.js. Ensemble, ils forment une stratégie de test complète sur nos projets frontend.
Playwright valide les parcours utilisateurs de nos applications Vue.js en conditions réelles de navigation, en complément des tests unitaires Vitest.
Les tests Playwright s'exécutent automatiquement dans notre pipeline GitLab. Un échec bloque le déploiement et garantit la qualité en production.
Playwright s'intègre avec Storybook pour générer des captures d'écran des composants et détecter les régressions visuelles directement depuis la documentation interactive.