Communitygithub.com

Svenja-dev/claude-code-skills

Compétence de test E2E automatisé pour Claude Code. Mots-clés : `teste`, `e2e`, `playwright`, `test navigateur`, `test visuel`, `smoke test`.

Qu'est-ce que claude-code-skills ?

Cette compétence pour Claude Code (également compatible avec Cursor et Codex) automatise les tests E2E (End-to-End) avec un comportement humain simulé, en ciblant les environnements de prévisualisation et de production. Elle utilise Chrome MCP ou Playwright MCP pour l'automatisation du navigateur. L'utilisateur peut invoquer des suites de tests prédéfinies (smoke, full, visual, upload, download, login, api) via des mots-clés comme `teste` ou `/e2e-test [suite] [--flags]`. La compétence intègre des délais aléatoires, des vitesses de frappe variables, des survols avant clic et un défilement fluide pour imiter un utilisateur réel, ce qui permet de détecter des bugs liés au timing et à l'interaction humaine. Elle génère des rapports Markdown détaillés avec des captures d'écran avant/après, des images de différences pour les tests visuels, et gère les baselines de référence dans `.playwright-mcp/`. Des options de configuration via `--flags` permettent de choisir l'environnement, le mode (headless pour CI/CD, human pour un vrai navigateur), la viewport (mobile/desktop), et de mettre à jour les baselines de captures d'écran. En résumé, c'est un outil puissant pour valider rapidement l'interface utilisateur, le flux d'authentification, le téléchargement de fichiers, le design responsive et la gestion des erreurs, avec une approche réaliste et facilement intégrable dans une pipeline CI/CD.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Svenja-dev/claude-code-skills/tree/HEAD/skills/e2e-testing
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence de Test E2E

Déclencheur

  • Mots-clés : teste, e2e, playwright, test navigateur, test visuel, smoke test
  • Appel : /e2e-test [suite] [--flags]

Description

Test E2E automatisé avec comportement humain pour les environnements de prévisualisation et de production. Utilise Chrome MCP ou Playwright MCP pour l'automatisation du navigateur.

Suites de Test

SuiteDuréeDescription
smoke30sConnexion, Upload, UI de base (par défaut avec teste)
full5minTous les scénarios P0+P1
visual2minUniquement les comparaisons de captures d'écran
upload1minTous les formats de fichiers
download2minFonctions d'export
login30sFlux d'authentification
api1minTests des points d'accès API

Flags

FlagDescription
--previewTester uniquement localhost
--productionTester uniquement l'URL de production
--quickUniquement les scénarios P0 (test le plus rapide)
--humanChrome MCP avec vrai navigateur
--headlessPlaywright MCP headless (CI/CD)
--update-baselinesMettre à jour les baselines de captures d'écran
--mobileTester les viewports mobiles (375px, 768px)

Workflow

1. VÉRIFICATION DE L'ENVIRONNEMENT
   - Vérifier si localhost est en cours d'exécution (curl/fetch)
   - Vérifier si l'URL de production est accessible
   - Choisir l'environnement de test en fonction des flags

2. CONFIGURATION DU NAVIGATEUR
   - Si --human : utiliser Chrome MCP (mcp__claude-in-chrome__)
   - Sinon : utiliser Playwright MCP (mcp__playwright__)
   - Viewport : 1280x720 (Desktop) ou 375x667 (Mobile)

3. ACTIVER LE COMPORTEMENT HUMAIN
   - Délais aléatoires : 200-800ms entre les actions
   - Vitesse de frappe : 50-150ms par touche
   - Survole avant clic (pause de 200-500ms)
   - Défilement fluide plutôt qu'instantané

4. EXÉCUTER LA SUITE DE TEST
   - Pour chaque test : capture d'écran avant/après
   - En cas d'erreur : sauvegarder la capture d'écran et les logs de la console
   - Vérification du téléchargement : vérifier la taille du fichier

5. GÉNÉRER LE RAPPORT
   - Rapport Markdown dans .playwright-mcp/reports/
   - Images de différences pour les écarts visuels
   - Résumé avec statut Pass/Fail/Flaky

Scénarios de Test (P0 - Critique pour l'entreprise)

1. Chargement de la Page d'Accueil

- Naviguer vers l'URL
- Attendre que l'élément principal soit visible
- Vérifier que le logo/la marque est visible
- Capture d'écran : landing-page.png

2. Flux de Connexion/Authentification

- Cliquer sur le bouton de connexion
- Attendre l'animation de la modale/de la page
- Vérifier que les options d'authentification sont visibles (OAuth, Email, etc.)
- Capture d'écran : login-modal.png

3. Changer de Langue (si i18n)

- Trouver le sélecteur de langue
- Cliquer avec délai humain
- Attendre le changement de texte
- Vérifier que les textes de l'interface ont changé
- Capture d'écran : language-toggle.png

4. Téléchargement de Fichier (si présent)

- Cliquer sur la zone de téléchargement
- Sélectionner un fichier de test
- Attendre la confirmation
- Vérifier que le nom du fichier est affiché
- Capture d'écran : file-uploaded.png

5. Exécuter l'Action Principale

- Exécuter la fonction principale de l'application
- Attendre l'état de chargement
- Attendre le résultat (max 60s)
- Vérifier que le contenu du résultat est présent
- Capture d'écran : result.png

6. Export/Téléchargement (si présent)

- Cliquer sur le bouton de téléchargement
- Attendre l'événement de téléchargement
- Vérifier que le format du fichier est correct
- Vérifier que la taille du fichier est > au minimum
- Capture d'écran : download-complete.png

Scénarios de Test (P1 - Important)

7. Navigation/Historique

- Cliquer sur un élément de navigation
- Attendre l'animation
- Vérifier que le contenu correct est chargé

8. Activation/Désactivation du Thème (si présent)

- Trouver le bouton de changement de thème
- Noter les couleurs actuelles
- Cliquer sur le bouton
- Vérifier que les couleurs ont changé
- Capture d'écran : theme-toggle.png

9. Design Responsive

- Définir la viewport sur 375x667
- Vérifier que la navigation mobile est visible
- Vérifier que les fonctions principales sont accessibles
- Capture d'écran : mobile-view.png

10. Gestion des Erreurs

- Provoquer une erreur (saisie invalide)
- Attendre le message d'erreur
- Vérifier que l'erreur est conviviale
- Capture d'écran : error-state.png

Fonctions de Comportement Humain

// Délai aléatoire (200-800ms)
async function humanDelay() {
  const delay = 200 + Math.random() * 600;
  await page.waitForTimeout(delay);
}

// Frappe humaine (50-150ms par touche)
async function humanType(selector: string, text: string) {
  await page.click(selector);
  await humanDelay();
  for (const char of text) {
    await page.keyboard.type(char);
    await page.waitForTimeout(50 + Math.random() * 100);
  }
}

// Motif survol -> pause -> clic
async function humanClick(selector: string) {
  await page.hover(selector);
  await page.waitForTimeout(200 + Math.random() * 300);
  await page.click(selector);
  await humanDelay();
}

// Défilement fluide
async function humanScroll(pixels: number) {
  await page.evaluate((px) => {
    window.scrollTo({ top: px, behavior: "smooth" });
  }, pixels);
  await page.waitForTimeout(500);
}

Format du Rapport

## Rapport de Test E2E - [DATE] [HEURE]

### Environnement

- **URL** : [URL testée]
- **Navigateur** : Chromium [version]
- **Viewport** : 1280x720
- **Suite** : smoke

### Résultats

| #   | Test                 | Statut  | Durée | Capture d'écran               |
| --- | -------------------- | ------- | ----- | ----------------------------- |
| 1   | Chargement Page d'Accueil | PASS | 0.8s  | [voir](landing-page.png)      |
| 2   | Modale de Connexion  | PASS    | 1.2s  | [voir](login-modal.png)       |
| 3   | Téléchargement Fichier | PASS  | 2.1s  | [voir](file-uploaded.png)     |
| 4   | Action Principale    | SLOW    | 45.2s | [voir](result.png)            |
| 5   | Téléchargement       | FAIL    | 3.4s  | [voir](error.png)             |

### Résumé

- **Total** : N Tests
- **Réussis** : X (Y%)
- **Échoués** : A (B%)
- **Lents/Instables** : C (D%)
- **Durée** : Zs

Baselines Visuelles

.playwright-mcp/
├── baselines/                    # Référence dorée (suivi git)
│   ├── landing-page-desktop.png
│   ├── landing-page-mobile.png
│   ├── login-modal.png
│   ├── result.png
│   └── error-state.png
├── current/                      # Captures d'écran actuelles (ignoré par git)
├── diffs/                        # Différences de pixels (ignoré par git)
└── reports/                      # Rapports de test (ignoré par git)

Exécution

Appel le Plus Simple

Utilisateur : "teste"
-> Exécute la suite smoke sur l'environnement disponible

Tests Spécifiques

Utilisateur : "teste upload"
-> Exécute uniquement la suite de téléchargement

Utilisateur : "teste production visual"
-> Exécute la suite visuelle sur la production

Utilisateur : "teste --quick --human"
-> Test rapide avec un vrai navigateur Chrome

Intégration CI/CD

Utilisateur : "teste --headless --full"
-> Tous les tests en mode headless pour la pipeline

Gestion des Erreurs

  1. Localhost inaccessible :

    • Afficher un avertissement
    • Demander si le serveur de développement doit être démarré

  2. Production inaccessible :

    • Afficher un avertissement
    • Vérifier le statut du déploiement

  3. Délai d'attente du test (>60s) :

    • Capture d'écran de l'état actuel
    • Sauvegarder les logs de la console
    • Marquer comme ÉCHEC

  4. Différence visuelle détectée :

    • Générer une image de différence
    • Marquer comme INSTABLE (pas automatiquement ÉCHEC)
    • L'utilisateur décide si une mise à jour de la baseline est nécessaire

Configuration

.e2e-config.json optionnel à la racine du projet :

{
  "previewUrl": "http://localhost:5173",
  "productionUrl": "https://your-app.com",
  "defaultSuite": "smoke",
  "timeouts": {
    "navigation": 10000,
    "action": 60000,
    "download": 30000
  },
  "viewports": {
    "desktop": { "width": 1280, "height": 720 },
    "tablet": { "width": 768, "height": 1024 },
    "mobile": { "width": 375, "height": 667 }
  },
  "humanBehavior": {
    "enabled": true,
    "minDelay": 200,
    "maxDelay": 800,
    "typingSpeed": { "min": 50, "max": 150 }
  },
  "screenshots": {
    "onEveryStep": false,
    "onFailure": true,
    "fullPage": false
  }
}

Prérequis

  • Chrome MCP ou Playwright MCP installé
  • Projet Node.js avec package.json
  • Optionnel : .e2e-config.json pour la configuration du projet

Auteur

Dresden AI Insights - https://dresdenaiinsights.com

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community