🧪 Tests

cypress-e2e-guide

Tests end-to-end avec Cypress, couvrant le setup, les commandes personnalisées, les fixtures, l'interception réseau et l'intégration CI.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- cypress-e2e-guide --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } cypress-e2e-guide -Launch"

🚀 Déjà installé ?

claude "/cypress-e2e-guide"

Ou tapez /cypress-e2e-guide dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

Cypresstest e2eend-to-end Cypresscy.get

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/testing-skills/cypress-e2e-guide ~/.claude/skills/

Source : testing-skills/cypress-e2e-guide

📖 Manuel

Cypress E2E Guide

Workflow

  1. Initialiser le projet Cypress — Installer Cypress via npm install cypress --save-dev, générer la structure de dossiers avec npx cypress open, et configurer cypress.config.ts avec les paramètres de base (baseUrl, viewportWidth, viewportHeight).
  2. Structurer les fichiers de test — Organiser les specs dans cypress/e2e/ par fonctionnalité ou module métier. Utiliser une convention de nommage claire (login.cy.ts, checkout.cy.ts).
  3. Créer des commandes personnalisées — Définir des commandes réutilisables dans cypress/support/commands.ts pour les actions répétitives (login, navigation, remplissage de formulaires). Typer les commandes avec des déclarations TypeScript.
  4. Préparer les fixtures et données de test — Créer des fichiers JSON dans cypress/fixtures/ pour les données de test. Utiliser cy.fixture() pour charger les données et découpler les tests des données dynamiques.
  5. Intercepter les appels réseau — Utiliser cy.intercept() pour stubber ou espionner les requêtes API. Définir des réponses mockées pour isoler le frontend et stabiliser les tests.
  6. Implémenter les assertions et vérifications — Combiner cy.get(), cy.contains(), .should() et .within() pour des assertions précises. Privilégier les sélecteurs data-testid pour la robustesse.
  7. Configurer l'exécution en CI — Ajouter Cypress au pipeline CI avec npx cypress run --headless. Configurer les enregistrements vidéo, les screenshots en cas d'échec, et le parallélisme avec Cypress Cloud si nécessaire.
  8. Analyser les résultats et maintenir les tests — Exploiter les rapports (Mochawesome, JUnit) pour le suivi. Identifier et corriger les tests flaky. Maintenir les sélecteurs et les données à jour.

Règles