YepAPI/skills

Tests E2E

Règles

• Playwright pour les tests E2E — multi-navigateurs, attente automatique, moteur de test intégré, excellent support CI
• Priorité des localisateurs : getByRole() > getByLabel() > getByPlaceholder() > getByTestId() > sélecteurs CSS
• Modèle Page Object : encapsuler les interactions de page dans des classes — LoginPage.login(email, motDePasse)
• Isolation des tests : chaque test commence avec un état frais — utiliser beforeEach pour la configuration, éviter les dépendances entre tests
• Attente automatique : Playwright attend les éléments automatiquement — ne pas ajouter d'appels manuels waitForTimeout()
• Assertions : utiliser les assertions web-first de expect(locator) — toBeVisible(), toHaveText(), toHaveURL()
• Exécution parallèle : les tests s'exécutent en parallèle par défaut — garantir l'absence d'état mutable partagé entre les tests
• CI : exécuter en mode headless, configurer les tentatives (retries: 2 dans CI), télécharger la trace en cas d'échec
• Régression visuelle : expect(page).toHaveScreenshot() — mettre à jour les bases avec --update-snapshots

Patterns

// Modèle Page Object
class LoginPage {
  constructor(private page: Page) {}
  async goto() { await this.page.goto("/login"); }
  async login(email: string, motDePasse: string) {
    await this.page.getByLabel("Email").fill(email);
    await this.page.getByLabel("Mot de passe").fill(motDePasse);
    await this.page.getByRole("button", { name: "Se connecter" }).click();
    await this.page.waitForURL("/dashboard");
  }
}

// playwright.config.ts
export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: { trace: "on-first-retry", screenshot: "only-on-failure" },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "mobile", use: { ...devices["Pixel 5"] } },
  ],
});

À éviter

• page.waitForTimeout() — utiliser l'attente automatique ou waitForURL(), waitForResponse()
• Les sélecteurs CSS pour les éléments interactifs — utiliser les localisateurs basés sur les rôles pour une meilleure résilience
• Les tests qui dépendent de l'état d'autres tests — chaque test doit être exécutable indépendamment
• Tester directement des services tiers — simuler les API externes avec page.route()
• Ignorer les fenêtres mobiles — tester au moins un appareil mobile dans votre matrice de projets