Cas pratiques Playwright

Contexte Un lien "Contact" redirige vers la page /contact. Le Problème Il faut vérifier que le clic sur le lien redirige correctement l’utilisateur. Contraintes Cliquer sur le lien via un locator fiable puis vérifier que l’URL contient "/contact". Livrable attendu Un test Playwright validant la navigation correcte entre deux pages.

Contexte Un formulaire contient un select permettant de choisir un pays. Le Problème Il faut sélectionner l’option "France" et vérifier qu’elle est bien sélectionnée. Contraintes Utiliser la méthode appropriée de Playwright pour sélectionner une option par valeur ou label, puis vérifier la valeur sélectionnée. Livrable attendu Un test Playwright simple validant la sélection correcte dans un menu déroulant.

Contexte Une page affiche dynamiquement une liste d’articles après chargement. Le Problème Il faut vérifier que la liste contient au moins trois éléments. Contraintes Utiliser un locator ciblant les éléments de la liste et vérifier leur nombre via une assertion adaptée. Livrable attendu Un test Playwright validant correctement la présence d’éléments dans la liste.

Contexte Un formulaire contient un champ "Nom" et un bouton "Envoyer". Après soumission, un message "Merci" doit apparaître. Le Problème Il faut automatiser la saisie du nom "Alice" puis vérifier l’apparition du message. Contraintes Utiliser page.fill() pour la saisie, page.click() pour soumettre et une assertion pour vérifier le texte affiché. Livrable attendu Un test Playwright validant le bon fonctionnement du formulaire.

Contexte Un test doit cliquer sur un bouton identifié par son texte "Valider". Le Problème Le code actuel : await page.locator('Valider').click(); Le sélecteur n’est pas valide. Contraintes Adapter le locator pour cibler correctement le bouton par son texte visible. Livrable attendu Un test Playwright corrigé utilisant un locator adapté.

Contexte Un test vérifie qu’un message d’erreur apparaît après une tentative de connexion invalide. Le Problème Le code actuel : const error = await page.locator('.error'); expect(error).toBeTruthy(); L’assertion ne vérifie pas réellement le contenu affiché. Contraintes Adapter l’assertion pour vérifier que le texte affiché correspond exactement au message attendu. Livrable attendu Un test Playwright plus robuste validant correctement le message d’erreur.

Contexte Un champ de recherche doit recevoir une valeur puis déclencher un filtrage. Le Problème Le code actuel : await page.type('#search', 'Laptop'); La méthode type n’est pas la plus adaptée dans ce contexte. Contraintes Remplacer par une méthode recommandée par Playwright pour remplir un champ de manière fiable. Livrable attendu Un test Playwright corrigé utilisant la bonne méthode pour saisir du texte.

Contexte Après un clic sur un bouton, un message de confirmation apparaît dynamiquement. Le Problème Le script actuel tente de vérifier immédiatement la présence du message : await page.click('#save'); await page.click('#success'); L’élément "#success" n’est pas encore visible. Contraintes Adapter le test pour attendre la visibilité de l’élément avant interaction ou assertion. Livrable attendu Un test Playwright stabilisé utilisant les attentes intégrées du framework.

Contexte Un test Playwright automatise la connexion d’un utilisateur sur une page /login. Le script doit remplir l’email, le mot de passe puis cliquer sur le bouton de soumission. Le Problème Le code suivant échoue car le sélecteur est incorrect : await page.goto('/login'); await page.fill('#email', 'user@test.com'); await page.fill('#password', '123456'); await page.click('#loginBtn'); Le bouton réel possède l’attribut data-testid="submit-login". Contraintes Corriger uniquement le sélecteur du bouton en utilisant une stratégie robuste adaptée à Playwright. Livrable attendu Un test Playwright fonctionnel permettant la connexion automatisée.

Contexte La page d’accueil doit afficher le titre "Accueil" dans l’onglet du navigateur. Le Problème Aucun test n’existe pour vérifier que le titre de la page correspond à la valeur attendue. Contraintes Écrire un test utilisant page.goto() puis une assertion pour vérifier que le titre est exactement "Accueil". Livrable attendu Un test Playwright simple validant correctement le titre de la page.

Contexte Une page permet de télécharger un fichier CSV après clic sur un bouton. Le Problème Il faut vérifier que le téléchargement est déclenché et que le fichier est bien reçu. Contraintes Écouter l’événement download, déclencher le clic puis vérifier le nom ou le chemin du fichier téléchargé. Livrable attendu Un test Playwright validant correctement le téléchargement d’un fichier.

Contexte Plusieurs tests nécessitent un utilisateur authentifié. Le Problème La connexion est répétée dans chaque test, ralentissant la suite. Contraintes Mettre en place un stockage d’état via storageState pour réutiliser une session authentifiée tout en garantissant l’isolation des tests. Livrable attendu Une configuration Playwright optimisée utilisant un état persistant sécurisé.

Contexte Un bouton "Voir détails" ouvre une nouvelle page ou un nouvel onglet contenant des informations supplémentaires. Le Problème Le test doit cliquer sur le bouton puis vérifier le contenu de la nouvelle page. Contraintes Utiliser le mécanisme d’écoute d’événement page pour capturer la nouvelle page ouverte. Basculer vers ce contexte et vérifier le titre ou un élément spécifique. Livrable attendu Un test Playwright capable de gérer correctement l’ouverture d’un nouvel onglet.

Contexte Un overlay de chargement recouvre temporairement le bouton "Confirmer". Le Problème Le test tente de cliquer immédiatement : await page.click('#confirm'); Cela provoque une erreur d’interaction. Contraintes Attendre la disparition de l’overlay ou la disponibilité réelle du bouton avant interaction. Utiliser les assertions natives plutôt que des délais fixes. Livrable attendu Un test Playwright stable respectant le comportement réel de l’interface.

Contexte Un test récupère un texte puis tente de l’utiliser dans une variable locale. Le Problème Le code actuel : const price = page.locator('#price').textContent(); expect(price).toBe('10'); La promesse n’est pas correctement attendue. Contraintes Corriger le test pour gérer correctement l’asynchronisme en utilisant await. Livrable attendu Un test Playwright respectant la gestion asynchrone correcte des valeurs retournées.

Contexte Une liste d’éléments possède des identifiants générés dynamiquement. Le Problème Le test utilise un id instable : await page.click('#item_12345'); L’identifiant change à chaque chargement. Contraintes Adapter le locator pour utiliser un attribut stable comme data-testid ou un rôle accessible. Livrable attendu Un test Playwright robuste utilisant une stratégie de sélection fiable.

Contexte Un formulaire est intégré dans une iframe sur la page principale. Le Problème Le test actuel tente d’accéder directement aux éléments internes : await page.fill('#email', 'test@test.com'); Les champs sont en réalité dans une iframe. Contraintes Identifier correctement le frameLocator et interagir avec les éléments via ce contexte spécifique. Livrable attendu Un test Playwright fonctionnel capable d’interagir avec des éléments dans une iframe.

Contexte Une page /dashboard charge ses données via une requête GET /api/stats après navigation. Le Problème Le test actuel vérifie immédiatement le contenu : await page.goto('/dashboard'); await expect(page.locator('.stat-item')).toHaveCount(3); Le test échoue parfois car la requête n’est pas encore terminée. Contraintes Synchroniser explicitement le test avec la requête réseau en utilisant waitForResponse ou une attente adaptée. Éviter les délais arbitraires. Livrable attendu Un test Playwright stabilisé garantissant que les données sont chargées avant les assertions.

Contexte La page de connexion doit être testée avec plusieurs combinaisons d’identifiants. Le Problème Le test actuel ne couvre qu’un seul scénario. Contraintes Créer une structure data-driven utilisant test.describe() ou une boucle sur un tableau de jeux de données. Vérifier les comportements attendus pour succès et échec. Livrable attendu Un test Playwright paramétré couvrant plusieurs cas d’authentification.

Contexte Les tests deviennent difficiles à maintenir avec des sélecteurs dupliqués. Le Problème Il faut restructurer le test de connexion en centralisant les sélecteurs et actions dans une classe dédiée. Contraintes Créer une classe LoginPage avec des méthodes login() et des locators encapsulés. Adapter le test pour utiliser cette abstraction. Livrable attendu Une architecture Playwright améliorant la maintenabilité et la lisibilité des tests.

Contexte L’application impose une authentification en deux étapes : mot de passe puis code OTP généré dynamiquement. Le Problème Le test doit gérer la transition entre les écrans et synchroniser l’apparition du champ OTP. Contraintes Mettre en place des attentes explicites sur chaque étape. Simuler ou injecter un OTP contrôlé pour garantir la reproductibilité du test. Livrable attendu Un test Playwright fiable couvrant un flux d’authentification multi-étapes complet.

Contexte Une page permet l’upload d’un fichier image qui déclenche un traitement serveur asynchrone. Le Problème Le test doit valider l’upload, la requête envoyée et l’affichage de l’aperçu une fois le traitement terminé. Contraintes Intercepter la requête réseau, vérifier son statut et synchroniser le test avec la fin du traitement backend avant assertion finale. Livrable attendu Un test Playwright complet validant l’intégration front-back lors d’un upload.

Contexte La suite doit être exécutée sur Chromium, Firefox et WebKit avec des configurations spécifiques (locale, permissions, viewport). Le Problème Il faut paramétrer dynamiquement les contextes navigateur tout en conservant la même logique de test. Contraintes Configurer correctement playwright.config et créer des contextes personnalisés par projet. Vérifier que le test fonctionne sur chaque moteur. Livrable attendu Une configuration Playwright avancée permettant une exécution cross-browser fiable et cohérente.

Contexte Plusieurs tests utilisent le même utilisateur et modifient ses paramètres au fil des scénarios. Le Problème Un test modifie les préférences du compte, impactant les suivants et provoquant des résultats non déterministes. Contraintes Mettre en place une stratégie d’isolation stricte : utilisateur unique par test ou réinitialisation via API. Garantir que chaque scénario démarre dans un état connu. Livrable attendu Une suite Playwright stable respectant l’indépendance complète des tests.

Contexte Une application utilise des Web Components encapsulés dans un Shadow DOM. Le Problème Le test actuel ne parvient pas à cibler un bouton interne au composant car il est encapsulé. Contraintes Configurer correctement les locators pour accéder aux éléments dans le Shadow DOM et vérifier le comportement attendu sans contourner les bonnes pratiques. Livrable attendu Un test Playwright capable d’interagir proprement avec des composants Shadow DOM.

Contexte L’interface utilise des transitions CSS longues pour afficher des modales et menus. Le Problème Le test interagit avec un élément avant la fin de l’animation, provoquant des erreurs d’interaction intermittentes. Contraintes Mettre en place des assertions garantissant que l’élément est réellement visible et interactif. Éviter les délais fixes et privilégier les conditions d’état. Livrable attendu Un test Playwright stabilisé face aux animations dynamiques.

Contexte Une application React reconstruit entièrement certaines sections du DOM après chaque action critique (ex: changement de filtre). Les tests deviennent intermittents. Le Problème Le script actuel : const button = page.locator('[data-testid=apply-filter]'); await button.click(); await button.click(); Après le premier clic, le composant est recréé et le locator précédent devient invalide, provoquant des erreurs intermittentes. Contraintes Adapter le test pour éviter toute dépendance à une instance DOM obsolète. S’appuyer sur les auto-waits et sur des assertions d’état stable avant nouvelle interaction. Livrable attendu Un test Playwright robuste face aux re-renders successifs d’une SPA moderne.

Contexte La suite Playwright est exécutée en parallèle sur plusieurs workers en CI. Le Problème Certains tests partagent des données utilisateurs identiques, provoquant des conflits et des échecs aléatoires. Contraintes Mettre en place une stratégie d’isolation complète : génération dynamique de données, nettoyage via API ou fixtures par worker. Garantir l’indépendance stricte des tests. Livrable attendu Une configuration Playwright stable en exécution parallèle avec isolation garantie.

Contexte La base de tests devient complexe avec duplication de logique d’initialisation et de configuration. Le Problème Il faut structurer les tests en utilisant des fixtures personnalisées et une architecture modulaire. Contraintes Créer des fixtures Playwright pour gérer la création d’utilisateur, l’authentification et la configuration initiale. Refactorer un test existant pour utiliser ces abstractions. Livrable attendu Une architecture Playwright avancée améliorant maintenabilité et évolutivité.

Contexte Une page dashboard dépend de plusieurs appels API critiques : /profile, /stats et /notifications. Le Problème Les tests actuels dépendent du backend réel, rendant les résultats instables et difficiles à reproduire. Contraintes Utiliser page.route() pour mocker différents scénarios : succès complet, erreur 500 et réponse partielle. Vérifier le comportement visuel et fonctionnel pour chaque cas. Livrable attendu Une suite de tests Playwright contrôlant totalement les réponses réseau et validant la résilience de l’interface.