Compétence de test d'applications web avec Playwright

--- name: web-application-testing-skill description: Une boîte à outils pour interagir avec et tester des applications web locales à l'aide de Playwright. --- # Test d'applications web Cette compétence permet de tester et de déboguer de manière exhaustive des applications web locales à l'aide de l'automatisation Playwright. ## Quand utiliser cette compétence Utilisez cette compétence lorsque vous devez : - Tester les fonctionnalités frontend dans un navigateur réel - Vérifier le comportement et les interactions de l'interface utilisateur - Déboguer les problèmes d'applications web - Capturer des captures d'écran pour la documentation ou le débogage - Inspecter les journaux de la console du navigateur - Valider les soumissions de formulaires et les parcours utilisateur - Vérifier la conception réactive sur différentes tailles d'écran ## Prérequis - Node.js installé sur le système - Une application web en cours d'exécution localement (ou une URL accessible) - Playwright sera installé automatiquement s'il n'est pas présent ## Capacités principales ### 1. Automatisation du navigateur - Naviguer vers des URL - Cliquer sur des boutons et des liens - Remplir des champs de formulaire - Sélectionner des listes déroulantes - Gérer les boîtes de dialogue et les alertes ### 2. Vérification - Vérifier la présence d'éléments - Vérifier le contenu textuel - Vérifier la visibilité des éléments - Valider les URL - Tester le comportement réactif ### 3. Débogage - Capturer des captures d'écran - Afficher les journaux de la console - Inspecter les requêtes réseau - Déboguer les tests échoués ## Exemples d'utilisation ### Exemple 1 : Test de navigation de base ```javascript // Naviguer vers une page et vérifier le titre await page.goto('http://localhost:3000'); const title = await page.title(); console.log('Titre de la page :', title); ``` ### Exemple 2 : Interaction avec un formulaire ```javascript // Remplir et soumettre un formulaire await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### Exemple 3 : Capture d'écran ```javascript // Capturer une capture d'écran pour le débogage await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## Directives 1. **Vérifiez toujours que l'application est en cours d'exécution** - Vérifiez que le serveur local est accessible avant d'exécuter les tests 2. **Utilisez des attentes explicites** - Attendez que les éléments ou la navigation soient terminés avant d'interagir 3. **Capturez des captures d'écran en cas d'échec** - Prenez des captures d'écran pour aider à déboguer les problèmes 4. **Nettoyez les ressources** - Fermez toujours le navigateur une fois terminé 5. **Gérez les délais d'attente avec élégance** - Définissez des délais d'attente raisonnables pour les opérations lentes 6. **Testez de manière incrémentale** - Commencez par des interactions simples avant des parcours complexes 7. **Utilisez les sélecteurs judicieusement** - Privilégiez les sélecteurs data-testid ou basés sur les rôles plutôt que les classes CSS ## Modèles courants ### Modèle : Attendre un élément ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### Modèle : Vérifier si un élément existe ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### Modèle : Obtenir les journaux de la console ```javascript page.on('console', msg => console.log('Journal du navigateur :', msg.text())); ``` ### Modèle : Gérer les erreurs ```javascript try { await page.click('#button'); } catch (error) { await page.screenshot({ path: 'error.png' }); throw error; } ``` ## Limitations - Nécessite un environnement Node.js - Ne peut pas tester les applications mobiles natives (utilisez React Native Testing Library à la place) - Peut rencontrer des problèmes avec les parcours d'authentification complexes - Certains frameworks modernes peuvent nécessiter une configuration spécifique