Fixtures de Playwright & paramétrage

Ce chapitre présente le mécanisme de Fixture de Playwright, comment créer des Fixtures personnalisées et des techniques de tests paramétrés.

Qu'est-ce qu'une Fixture ?

Une Fixture est un mécanisme d'injection de dépendances pour les paramètres des fonctions de test Playwright.

Chaque test obtient les Fixtures requises en déstructurant les paramètres (par exemple,{ page }), et Playwright gère la création et le nettoyage.

Exemple

// page et context sont des Fixtures intégrées
test('Utilisation des Fixtures intégrées', async ({ page, context }) => {
  // Playwright crée automatiquement page et context
  // Nettoyage automatique après la fin du test
  await page.goto('https://www.example.com/');
});

Référence rapide des Fixtures intégrées

FixtureTypeDescription
pagePageOnglet de navigateur indépendant
contextBrowserContextContexte de navigateur
browserNavigateurInstance de navigateur
browserNamestringNom du navigateur actuel
requestAPIRequestContextClient de requête HTTP

Fixtures personnalisées

Viatest.extend()Créez des Fixtures personnalisées pour injecter des dépendances supplémentaires ou remplacer les Fixtures intégrées.

Exemple

// Chemin du fichier : tests/fixtures.ts
import { test as base, expect } from '@playwright/test';

// Définir le type de la Fixture personnalisée
type MyFixtures = {
  todoPage: { goto: () => Promise<void>; addTodo: (text: string) => Promise<void> };
  authenticatedPage: any;
};

export const test = base.extend<MyFixtures>({
  // Fixture personnalisée : objet de page Todo
  todoPage: async ({ page }, use) => {
    // Créer
    const todoPage = {
      goto: async () => {
        await page.goto('https://demo.playwright.dev/todomvc');
      },
      addTodo: async (text: string) => {
        await page.getByPlaceholder('Que faut-il faire ?').fill(text);
        await page.keyboard.press('Enter');
      },
    };
    // Injecter dans le test
    await use(todoPage);
    // Logique de nettoyage (si nécessaire)
  },

  // Fixture personnalisée : page authentifiée
  authenticatedPage: async ({ browser }, use) => {
    const context = await browser.newContext({
      storageState: 'playwright/.auth/user.json',
    });
    const page = await context.newPage();
    await use(page);
    await context.close();
  },
});

export { expect };

Utilisation de fixtures personnalisées

Exemple

// Chemin du fichier : tests/todo.spec.ts
import { test, expect } from './fixtures';

test('Add Todo', async ({ todoPage }) => {
  await todoPage.goto();
  await todoPage.addTodo('Learn Playwright');
  await todoPage.addTodo('Master Fixtures');
  // Vérifier...
});

Portées des fixtures

Les fixtures ont trois portées, contrôlées par lescopeoption.

PortéeValeurCycle de vie
Niveau test (par défaut)scope: 'test'Créée une fois par test
Niveau Workerscope: 'worker'Créée une fois par processus Worker, partagée par tous les tests du même Worker

Exemple

// Fixture au niveau Worker (partagée par tous les tests du même Worker)
const test = base.extend({
  sharedResource: [async ({}, use) => {
    const resource = await createExpensiveResource();
    await use(resource);
    await resource.dispose();
  }, { scope: 'worker' }],  // Remarque sur la syntaxe du tableau
});

Les Fixtures au niveau Worker sont partagées entre plusieurs tests au sein du même processus Worker, adaptées aux ressources à coût de création élevé telles que les connexions à la base de données.

Surcharge des Fixtures intégrées

Vous pouvez surcharger les Fixtures intégrées pour modifier le comportement par défaut.

Exemple

const test = base.extend({
  // Surcharger la Fixture page intégrée pour modifier la fenêtre d'affichage par défaut
  page: async ({ baseURL, page }, use) => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    await use(page);
  },

  // Remplacer storageState
  storageState: 'playwright/.auth/admin.json',
});

Nettoyage automatique des fixtures

La logique de nettoyage de la fixture est exécutée après leuse()appel, similaire à l'effet deafterEach.

Exemple

const test = base.extend({
  tempUser: async ({ request }, use) => {
    // Créer un utilisateur temporaire
    const resp = await request.post('/api/users', {
      data: { name: 'temp_' + Date.now() },
    });
    const user = await resp.json();

    // Injecter dans le test
    await use(user);

    // Nettoyage automatique : supprimer l'utilisateur temporaire
    await request.delete(`/api/users/${user.id}`);
  },
});

Tests paramétrés

Playwright ne dispose pas d'un mécanisme de paramétrage intégré, mais les tests peuvent être générés dynamiquement à l'aide de boucles.

Exemple

// Test piloté par les données
const testCases = [
  { username: 'admin', password: 'admin123', expected: 'Tableau de bord' },
  { username: 'user',  password: 'user123',  expected: 'Espace personnel' },
  { username: 'guest', password: 'guest123', expected: 'Page visiteur' },
];

for (const { username, password, expected } of testCases) {
  test(`Utilisateur ${username}voit $ après connexion{expected}`, async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Username').fill(username);
    await page.getByLabel('Password').fill(password);
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page.getByText(expected)).toBeVisible();
  });
}

Annotations de test

Les annotations sont utilisées pour ajouter des métadonnées aux tests, qui peuvent être visualisées et filtrées dans le reporter.

Exemple

test('Test avec annotation', async ({ page }) => {
  // Ajouter une annotation (à l'intérieur du corps de la fonction de test)
  test.info().annotations.push({
    type: 'issue',
    description: 'https://github.com/example/bug/123',
  });
  test.info().annotations.push({
    type: 'description',
    description: 'Ce test couvre toutes les branches du flux de connexion',
  });

  // Logique de test...
});

// Utilisation de Tag (dans le nom du test)
test('Test de fumée rapide @smoke @critical', async ({ page }) => {
  // Vous pouvez exécuter uniquement ce test avec npx playwright test --grep "@smoke"
});
Autres extensions