Test d'Application Web

Cette skill permet de tester et déboguer de manière complète des applications web locales en utilisant l'automatisation Playwright.

Vous devez utiliser le Playwright MCP Server pour effectuer le travail si possible. Si le serveur MCP n'est pas disponible, vous pouvez exécuter le code dans un environnement Node.js local avec Playwright installé.

Quand utiliser cette skill

Utilisez cette skill quand vous devez :

Tester la fonctionnalité frontend dans un vrai navigateur
Vérifier le comportement et les interactions de l'interface utilisateur
Déboguer les problèmes d'application web
Capturer des captures d'écran à des fins de documentation ou de débogage
Inspecter les journaux de la console du navigateur
Valider les soumissions de formulaires et les flux utilisateur
Vérifier le responsive design sur différents viewports

Prérequis

Node.js installé sur le système
Une application web exécutée 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 URLs
Cliquer sur des boutons et des liens
Remplir les champs de formulaire
Sélectionner des dropdowns
Gérer les dialogues et les alertes

2. Vérification

Affirmer la présence d'un élément
Vérifier le contenu texte
Vérifier la visibilité d'un élément
Valider les URLs
Tester le comportement responsive

3. Débogage

Capturer des captures d'écran
Consulter les journaux de console
Inspecter les requêtes réseau
Déboguer les tests échoués

Exemples d'utilisation

Exemple 1 : Test de navigation basique

// Navigate to a page and verify title
await page.goto("http://localhost:3000");
const title = await page.title();
console.log("Page title:", title);

Exemple 2 : Interaction avec un formulaire

// Fill out and submit a form
await page.fill("#username", "testuser");
await page.fill("#password", "password123");
await page.click('button[type="submit"]');
await page.waitForURL("**/dashboard");

Exemple 3 : Capture de capture d'écran

// Capture a screenshot for debugging
await page.screenshot({ path: "debug.png", fullPage: true });

Recommandations

Toujours vérifier que l'application est en cours d'exécution - Vérifiez que le serveur local est accessible avant d'exécuter les tests
Utiliser des attentes explicites - Attendez les éléments ou la navigation pour terminer avant d'interagir
Capturer des captures d'écran en cas d'échec - Prenez des captures d'écran pour aider à déboguer les problèmes
Nettoyer les ressources - Toujours fermer le navigateur une fois terminé
Gérer les timeouts gracieusement - Définir des timeouts raisonnables pour les opérations lentes
Tester de manière incrémentale - Commencez par des interactions simples avant les flux complexes
Utiliser les sélecteurs judicieusement - Préférer les sélecteurs data-testid ou basés sur le rôle plutôt que les classes CSS

Modèles courants

Modèle : Attendre un élément

await page.waitForSelector("#element-id", { state: "visible" });

Modèle : Vérifier si un élément existe

const exists = (await page.locator("#element-id").count()) > 0;

Modèle : Obtenir les journaux de console

page.on("console", (msg) => console.log("Browser log:", msg.text()));

Modèle : Gérer les erreurs

try {
  await page.click("#button");
} catch (error) {
  await page.screenshot({ path: "error.png" });
  throw error;
}

Limitations

Nécessite un environnement Node.js
Impossible de tester les applications mobiles natives (utiliser React Native Testing Library à la place)
Peut rencontrer des problèmes avec les flux d'authentification complexes
Certains frameworks modernes peuvent nécessiter une configuration spécifique

Fonctions d'aide

Certaines fonctions d'aide sont disponibles dans test-helper.js pour simplifier les tâches courantes comme l'attente d'éléments, la capture de captures d'écran et la gestion des erreurs. Vous pouvez importer et utiliser ces fonctions dans vos tests pour améliorer la lisibilité et la maintenabilité.

webapp-testing