MarmicodeFormation Testing UI Pragmatique avec Playwright
3 Jours · Online
🐣 Early Bird à partir de 970 € HT
Trois jours pour transformer le chaos des tests UI en une stratégie Playwright bien assaisonnée.Construisez des tests qui résistent au refactoring, aux migrations et au développement assisté par IA.
🇫🇷 Formation finançable jusqu'à 100% via OPCO.
🍱 Ce que vous apprendrez
Testez vos applications Angular, React, Vue ou sans framework avec la même boîte à outils Playwright.
Écrivez des tests qui décrivent le comportement, pas des détails d'implémentation, et qui résistent au refactoring.
Connectez Playwright à votre agent IA pour la reproduction, la spécification et la correction de bugs.
Maîtrisez l'interception de requêtes, le setup d'auth et l'API Clock de Playwright pour des tests rapides et fiables.
Apprenez quand et comment utiliser les Gloves, les Test Harnesses et Playwright Component Testing.
Détectez les régressions visuelles sans douleur.
Profitez d'un buffet de conseils et de techniques pour adopter une stratégie de test UI scalable et rentable.
🗓️ Programme
- Pourquoi tester ?
- Les différents types de tests.
- Les stratégies de testing : cornet de glace, pyramide vs. rayon de miel.
- Developer eXperience.
- Rapidité.
- Debuggabilité.
- Retry-ability.
- Cohérence et stabilité.
- AI-Assisted Testing.
- Mise en place de Playwright.
- Mise en place de Playwright avec Nx.
- Implémenter et lancer un premier test Playwright.
- Les fixtures.
- Les assertions.
- Organisation des tests.
- Interagir avec le DOM.
- Interagir avec les formulaires.
- La philosophie des locators : web-first, auto-waiting, retry-ability.
- Locators recommandés et priorité : `getByRole`, `getByLabel`, `getByText` & co.
- Filtrer, chaîner et résoudre les ambiguïtés (`filter`, `nth`, strict mode).
- Accessibilité et testabilité : pourquoi `getByRole` est plus qu'un détail technique.
- Réécrire des tests CSS-driven en locators sémantiques.
- Installation et exécution des tests depuis l'IDE.
- Aide à l'implémentation des tests et enregistrement.
- Enregistrer un premier test.
- UI Mode et Trace Viewer : l'expérience de développement et de debug.
- Anatomie d'une trace : actions, snapshots DOM, network, console.
- `page.pause()`, Inspector et breakpoints VSCode.
- Diagnostiquer la "flakiness" via les retries et les traces.
- Diagnostiquer un test flaky à partir de sa trace.
- Avantages et inconvénients des différentes techniques.
- Interception de requêtes vs. sandbox.
- Intercepter les requêtes.
- Utiliser une sandbox.
- Le coût des connexions répétées.
- Le pattern `auth.setup.ts` avec project dependencies.
- Authentification via UI vs API : trade-offs et scénarios multi-utilisateurs.
- Mettre en place un setup d'authentification réutilisable.
- Fake timers et l'API Clock de Playwright.
- Cas d'usage : debounce, polling, animations, dates.
- Tester sans attendre.
- Jouer avec le timer.
- Accessibilité et testabilité.
- Page objects : avantages et limites.
- L'histoire des Test Harnesses.
- Gloves & Test Harnesses : comment cela fonctionne.
- Utiliser les test harnesses.
- Implémenter des test harnesses.
- Briser les frontières de l'"isolated testing" avec Playwright Component Testing.
- Isoler et tester un composant avec Playwright.
- Réutiliser le test harness.
- Test Doubles : Dummies, Stubs, Spies, Mocks & Fakes.
- "Overrider" les dépendances avec l'injection de dépendance et les fakes.
- Tester la communication à base de props, inputs & outputs.
- Tester la présentation.
- Détecter les régressions visuelles.
- Détecter une régression visuelle sur un composant avec masking d'éléments dynamiques.
- `playwright-cli` vs Playwright MCP : que choisir pour permettre à votre agent IA d'utiliser Playwright.
- Screencast annoté : faire produire à l'agent une vidéo de preuve, avec annotations des éléments observés sur la page.
- La boucle agent → test : exploration, reproduction, spécification, correction.
- Faire reproduire un bug par l'agent et générer un screencast annoté qui l'explique.
- Faire générer un test qui échoue à partir de cette reproduction.
- Faire corriger le bug par l'agent en s'appuyant sur le test précédent.
- Configuration de la CI.
- Reporters.
- Parallélisation et sharding.
- Comment lutter contre la "flakiness".
- Comment concevoir une stratégie de testing maintenable et "scalable".
🎓 Prérequis
- Connaissances en développement Web : JavaScript & TypeScript
- Curiosité pour les technologies Web
- Fondamentaux Git (ex. : cloner, réinitialiser les changements locaux, changer de branche)
👨🏻🏫 Votre formateur
Younes Jaaidi
I am a Software Cook who enjoys whipping code until tests pass.
With nearly 20 years of experience in eXtreme Programming, I've coached dozens of teams and trained thousands of developers to cook robust and maintainable software — using Test-Driven Development, pragmatic testing strategies, and a healthy dose of Collective Ownership.
I'm also an Angular Google Developer Expert, an NX Champion, and a mediocre sailor.
🙋 Foire aux questions
Aux développeurs web (Angular, React, Vue ou sans framework) souhaitant écrire des tests UI efficaces, lisibles et rentables. Aux lead developers et tech leads en charge de cadrer la stratégie de testing au sein de leur équipe. Aux architectes et CTOs cherchant à industrialiser le testing frontend sans sacrifier la vélocité de livraison. Aux équipes confrontées à des tests fragiles ou ingérables et cherchant une approche structurée, scalable et adaptée au développement assisté par IA.
Vous devez être à l'aise avec les fondamentaux de JavaScript et TypeScript. Aucune expérience préalable de Playwright ou du testing n'est nécessaire — on part de zéro.
Un ordinateur avec accès Internet, micro, webcam, navigateur à jour et droits d'installation. Les instructions de setup sont envoyées quelques jours avant la formation.
Très. Vous alternerez entre courtes sessions théoriques et exercices pratiques sur un cas fil rouge pendant trois jours. Les petits groupes garantissent un accompagnement direct et personnalisé.
Non. Les techniques s'appliquent à Angular, React, Vue et aux applications sans framework. Les exercices se concentrent sur des patterns Playwright transposables d'une stack à l'autre.
Si vous êtes en France, cette formation est éligible au financement OPCO. Contactez-moi pour un devis et les modalités administratives.
"Réserver une Place" vous inscrit à une session planifiée. "Session sur Mesure" s'adresse aux entreprises qui souhaitent une formation privée — avec la possibilité d'adapter le contenu, la durée ou les priorités.
Si la formation ne répond pas à vos attentes, contactez-moi dans les 7 jours et nous trouverons une solution ensemble.