Aller au contenu principal

Lab 23 : Tests E2E avec Playwright

📖 Ressources​

🚀 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.