Configuration multi-projets de Playwright (Projects)

Ce chapitre présente comment exécuter des tests sur plusieurs navigateurs et appareils via la configuration Projects, ainsi que l'utilisation des dépendances de projet.

Qu'est-ce qu'un Project

Dans Playwright, un Project représente un groupe detests qui s'exécutent sous des configurations de navigateur et d'appareil spécifiques.

En configurant plusieurs Projects, vous pouvez exécuter le même ensemble de code de test sur Chromium, Firefox, WebKit et les appareils mobiles.

Configuration multi-navigateurs de base

Exemple

// Chemin du fichier : playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Exécuter des tests pour un navigateur spécifique :

# 仅在 Chromium 上运行
npx playwright test --project=chromium

# 在 Chromium 和 Firefox 上运行
npx playwright test --project=chromium --project=firefox

devices Préréglages d'appareils

Playwright inclut un grand nombre de préréglages d'appareils intégrés (depuis@playwright/testdedevices), qui simulent la fenêtre d'affichage, l'User-Agent, le ratio de pixels, etc. des appareils réels.

Exemple

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

export default defineConfig({
  projects: [
    // Bureau
    {
      name: 'desktop-chrome',
      use: { ...devices['Desktop Chrome'] },
    },

    // Mobile
    {
      name: 'mobile-iphone',
      use: { ...devices['iPhone 15'] },
    },
    {
      name: 'mobile-pixel',
      use: { ...devices['Pixel 7'] },
    },

    // Tablette
    {
      name: 'tablet-ipad',
      use: { ...devices['iPad Pro'] },
    },
  ],
});

Préréglages d'appareils couramment utilisés:

Nom du préréglageType d'appareilTaille de la fenêtre d'affichage
Desktop ChromeOrdinateur de bureau1280×720
Desktop FirefoxOrdinateur de bureau1280×720
Desktop SafariOrdinateur de bureau1280×720
iPhone 15Mobile393×852
Pixel 7Mobile412×915
iPad ProTablette1024×1366

Configuration personnalisée du projet

Vous pouvez dans le projetusesurcharger la configuration globale :

Exemple

export default defineConfig({
  use: {
    baseURL: 'http://localhost:3000',
    locale: 'zh-CN',
    timezone: 'Asia/Shanghai',
  },

  projects: [
    {
      name: 'chromium-desktop',
      use: {
        ...devices['Desktop Chrome'],
        // Hériter de la locale et du fuseau horaire globaux
      },
    },
    {
      name: 'chromium-mobile',
      use: {
        ...devices['Pixel 7'],
        // Remplacer par un environnement anglais
        locale: 'en-US',
        timezone: 'America/New_York',
      },
    },
    // Tester le mode sombre
    {
      name: 'chromium-dark',
      use: {
        ...devices['Desktop Chrome'],
        colorScheme: 'dark',
      },
    },
    // Tester le mode clair
    {
      name: 'chromium-light',
      use: {
        ...devices['Desktop Chrome'],
        colorScheme: 'light',
      },
    },
  ],
});

Dépendances du projet

Un projet peut dépendre d'un autre projet, ce qui garantit que le projet dont il dépend s'exécute en premier.

L'utilisation la plus courante consiste à ce qu'un projet de configuration (authentification) s'exécute en premier, et les autres projets en dépendent.

Exemple

export default defineConfig({
  projects: [
    // Projet de configuration — générer l'état d'authentification
    {
      name: 'setup',
      testMatch: /auth\.setup\.ts/,
    },

    // Le projet de test dépend de la configuration, ce qui garantit que l'état d'authentification est généré en premier
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
  ],
});

setupUn projet ne s'exécutera qu'une seule fois, et tous les projets qui en dépendent attendront qu'il soit terminé avant de démarrer.

Partage de configuration via testProject

Pour permettre à plusieurs projets de partager une configuration sans répétition, vous pouvez extraire un projet de base :

Exemple

// Chemin du fichier : playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

const desktopProject = {
  use: {
    ...devices['Desktop Chrome'],
    viewport: { width: 1920, height: 1080 },
    locale: 'zh-CN',
  },
} as const;

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      ...desktopProject,  // Hériter de la configuration de desktopProject
      use: {
        ...desktopProject.use,  // Hériter d'abord
        browserName: 'chromium', // Puis remplacer
      },
    },
    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
        // Remplacer viewport et locale
        viewport: { width: 1920, height: 1080 },
        locale: 'zh-CN',
      },
    },
  ],
});
Autres extensions