JantonioFC/skillsbank

Playwright Pro

Kit de test Playwright de qualité production pour les agents d'IA de codage.

Commandes disponibles

Lorsqu'il est installé comme plugin Claude Code, ces commandes sont disponibles sous forme de commandes /pw: :

Commande	Fonction
/pw:init	Configure Playwright — détecte le framework, génère la configuration, CI, premier test
/pw:generate <spec>	Génère des tests à partir d'un récit utilisateur, d'une URL ou d'un composant
/pw:review	Examine les tests pour détecter les anti-patrons et les lacunes de couverture
/pw:fix <test>	Diagnostique et corrige les tests qui échouent ou sont instables
/pw:migrate	Migre depuis Cypress ou Selenium vers Playwright
/pw:coverage	Analyse ce qui est testé par rapport à ce qui manque
/pw:testrail	Synchronise avec TestRail — lit les cas, pousse les résultats
/pw:browserstack	Exécute sur BrowserStack, récupère les rapports multi-navigateurs
/pw:report	Génère un rapport de test dans le format de votre choix

Flux de travail de démarrage rapide

La séquence recommandée pour la plupart des projets :

1. /pw:init          → échafaude la config, le pipeline CI et un premier test de smoke
2. /pw:generate      → génère des tests à partir de votre spécification ou URL
3. /pw:review        → valide la qualité et signale les anti-patrons      ← toujours exécuter après generate
4. /pw:fix <test>    → diagnostique et répare les tests qui échouent/instables  ← exécuter quand le CI devient rouge

Points de contrôle de validation :

• Après /pw:generate — exécutez toujours /pw:review avant de valider ; il détecte automatiquement les anti-patrons de localisateurs et les assertions manquantes.
• Après /pw:fix — réexécutez la suite complète localement (npx playwright test) pour confirmer que le correctif n'introduit pas de régressions.
• Après /pw:migrate — exécutez /pw:coverage pour confirmer la parité avec l'ancienne suite avant de désaffecter les tests Cypress/Selenium.

Exemple : Générer → Réviser → Corriger

# 1. Générer des tests à partir d'un récit utilisateur
/pw:generate "En tant qu'utilisateur, je peux me connecter avec un email et un mot de passe"

# Généré : tests/auth/login.spec.ts
# → Playwright Pro crée le fichier en utilisant le modèle d'authentification.

# 2. Réviser les tests générés
/pw:review tests/auth/login.spec.ts

# → Signale : un test utilisait page.locator('input[type=password]') — suggère getByLabel('Password')
# → Correction appliquée automatiquement.

# 3. Exécuter localement pour confirmer
npx playwright test tests/auth/login.spec.ts --headed

# 4. Si un test est instable dans le CI, diagnostiquez-le
/pw:fix tests/auth/login.spec.ts
# → Identifie une assertion web-first manquante ; remplace waitForTimeout(2000) par expect(locator).toBeVisible()

Règles d'or

1. getByRole() plutôt que CSS/XPath — résistant aux changements de balisage
2. Jamais page.waitForTimeout() — utilisez les assertions web-first
3. expect(locator) réessaie automatiquement ; expect(await locator.textContent()) non
4. Isolez chaque test — aucun état partagé entre les tests
5. baseURL dans la configuration — zéro URL codée en dur
6. Nouvelles tentatives : 2 dans le CI, 0 en local
7. Traces : 'on-first-retry' — débogage riche sans ralentissement
8. Fixtures plutôt que globales — test.extend() pour l'état partagé
9. Un comportement par test — plusieurs assertions liées sont acceptables
10. Simulez les services externes uniquement — ne simulez jamais votre propre application

Priorité des localisateurs

1. getByRole()        — boutons, liens, titres, éléments de formulaire
2. getByLabel()       — champs de formulaire avec étiquettes
3. getByText()        — texte non interactif
4. getByPlaceholder() — champs avec espace réservé
5. getByTestId()      — lorsqu'aucune option sémantique n'existe
6. page.locator()     — CSS/XPath en dernier recours

Ce qui est inclus

• 9 compétences avec des instructions détaillées étape par étape
• 3 agents spécialisés : architecte de test, débogueur de test, planificateur de migration
• 55 modèles de test : auth, CRUD, checkout, recherche, formulaires, tableau de bord, paramètres, onboarding, notifications, API, accessibilité
• 2 serveurs MCP (TypeScript) : intégrations TestRail et BrowserStack
• Hooks intelligents : validation automatique de la qualité des tests, détection automatique des projets Playwright
• 6 documents de référence : règles d'or, localisateurs, assertions, fixtures, pièges courants, tests instables
• Guides de migration : tableaux de correspondance Cypress et Selenium

Configuration de l'intégration

TestRail (Optionnel)

export TESTRAIL_URL="https://votre-instance.testrail.io"
export TESTRAIL_USER="[email protected]"
export TESTRAIL_API_KEY="votre-clé-api"

BrowserStack (Optionnel)

export BROWSERSTACK_USERNAME="votre-nom-utilisateur"
export BROWSERSTACK_ACCESS_KEY="votre-clé-accès"

Référence rapide

Voir le dossier reference/ pour :

• golden-rules.md — Les 10 règles non négociables
• locators.md — Priorité complète des localisateurs avec aide-mémoire
• assertions.md — Référence des assertions web-first
• fixtures.md — Fixtures personnalisées et motifs storageState
• common-pitfalls.md — Top 10 des erreurs et correctifs
• flaky-tests.md — Commandes de diagnostic et correctifs rapides

Voir templates/README.md pour l'index complet des modèles.

Quand utiliser

Utilisez cette compétence lorsque vous avez besoin de conseils ou d'automatisation pour playwright-pro.