Lab 23 : Tests E2E avec Playwright

📖 Ressources

• Référence Tests E2E

🚀 Code de départ

step-21-album-wholesale-v21-post-test-vittest

Dans ce lab, vous écrirez des tests de bout en bout pour l’application album wholesale en utilisant Playwright. Vous utiliserez des sélecteurs basés sur les rôles, remplirez des formulaires et vérifierez les flux de navigation.

📝 Instructions

Étape 1 : Initialiser Playwright

Installez d’abord le package @playwright/test (l’outil npm init playwright@latest ne l’installe pas automatiquement dans le package.json) :

npm install --save-dev @playwright/test
npx playwright install chromium
npx playwright init

Quand demandé :

• TypeScript : Oui
• Dossier de tests : e2e
• Ajouter GitHub Actions : Non (pour l’instant)

Étape 2 : Configurer Playwright

Mettez à jour playwright.config.ts :

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  retries: 0,
  use: {
    baseURL: 'http://localhost:4200',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  ],
  webServer: {
    command: 'ng serve',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env['CI'],
  },
});

Étape 3 : Écrire un test de navigation basique

Créez e2e/navigation.spec.ts :

import { test, expect } from '@playwright/test';

test('la page d\'accueil charge et affiche la liste des albums', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
  await expect(page.locator('.album-card').first()).toBeVisible();
});

test('on peut naviguer vers le détail d\'un album', async ({ page }) => {
  await page.goto('/');
  await page.locator('.album-card').first().click();
  await expect(page.getByRole('heading', { level: 2 })).toBeVisible();
});

Étape 4 : Tester la fonctionnalité de recherche / filtre

Créez e2e/search.spec.ts :

import { test, expect } from '@playwright/test';

test('on peut rechercher un album', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('searchbox').fill('jazz');
  await expect(page.locator('.album-card')).toHaveCount(
    await page.locator('.album-card').count()
  );
});

Étape 5 : Tester le flux panier

Créez e2e/cart.spec.ts :

import { test, expect } from '@playwright/test';

test('on peut ajouter un album au panier', async ({ page }) => {
  await page.goto('/');
  await page.locator('.album-card').first()
    .getByRole('button', { name: /add to cart/i }).click();

  await expect(page.getByTestId('cart-count')).toContainText('1');
});

test('le panier persiste après navigation', async ({ page }) => {
  await page.goto('/');
  await page.locator('.album-card').first()
    .getByRole('button', { name: /add to cart/i }).click();

  await page.getByRole('link', { name: /home/i }).click();
  await expect(page.getByTestId('cart-count')).toContainText('1');
});

Étape 6 : Utiliser les sélecteurs basés sur les rôles

Préférez les sélecteurs accessibles aux classes CSS :

// Par rôle
page.getByRole('button', { name: 'Submit' });
page.getByRole('link', { name: 'Accueil' });
page.getByRole('textbox', { name: 'Rechercher' });

// Par label
page.getByLabel('Adresse e-mail');

// Par test id (ajoutez data-testid dans le template)
page.getByTestId('cart-count');

Étape 7 : Exécuter les tests

# Exécuter tous les tests
npx playwright test

# Exécuter en mode UI
npx playwright test --ui

# Exécuter un fichier spécifique
npx playwright test e2e/cart.spec.ts

# Afficher le rapport HTML
npx playwright show-report

En cas d’échec, Playwright capture automatiquement une capture d’écran et une trace. Ouvrez le rapport pour inspecter l’échec.