Configuration Playwright expliquée
Ce chapitre présente en détailplaywright.config.tsles différentes configurations qu'il contient, vous permettant d'ajuster avec flexibilité le comportement des tests en fonction des exigences du projet.
Aperçu du fichier de configuration
playwright.config.tsest le fichier de configuration central de Playwright, où tous les paramètres d'exécution des tests sont définis.
Exemple
// Chemin du fichier : playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
// ===== Configuration de base =====
testDir: './tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
timeout: 30000,
// ===== Configuration globale partagée =====
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
// ===== Projets multi-navigateurs =====
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
// ===== Serveur Web =====
webServer: {
command: 'npm run start',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
// ===== Configuration de base =====
testDir: './tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
timeout: 30000,
// ===== Configuration globale partagée =====
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
// ===== Projets multi-navigateurs =====
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
// ===== Serveur Web =====
webServer: {
command: 'npm run start',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
Options de configuration de base
| Élément de configuration | Type | Valeur par défaut | Description |
|---|---|---|---|
testDir | string | tests | Répertoire où se trouvent les fichiers de test |
fullyParallel | booléen | false | Indique s'il faut exécuter tous les tests entièrement en parallèle (y compris les tests au sein d'un même fichier) |
workers | nombre | Cœurs CPU / 2 | Nombre de workers exécutés en parallèle |
retries | nombre | 0 | Nombre de tentatives pour les tests échoués |
timeout | nombre | 30000 | Délai d'expiration total par test (millisecondes) |
reporter | chaîne/tableau | liste | Type de rapporteur de tests |
forbidOnly | booléen | false | Échouer si test.only() est détecté sur CI |
testMatch | string/RegExp | *.spec.(ts\|js) | Motif de correspondance des fichiers de test |
testIgnore | string/RegExp | - | Motifs de fichiers de test ignorés |
Exemple de configuration
Exemple
export default defineConfig({
// Rechercher les tests dans le répertoire e2e
testDir: './e2e',
// Tous les tests entièrement en parallèle
fullyParallel: true,
// Allouer automatiquement le nombre de workers
workers: undefined,
// Aucune nouvelle tentative en cas d'échec (local) / réessayer 2 fois (CI)
retries: process.env.CI ? 2 : 0,
// Utiliser à la fois les rapports en ligne de commande et HTML
reporter: [
['list'],
['html', { open: 'never' }],
],
});
// Rechercher les tests dans le répertoire e2e
testDir: './e2e',
// Tous les tests entièrement en parallèle
fullyParallel: true,
// Allouer automatiquement le nombre de workers
workers: undefined,
// Aucune nouvelle tentative en cas d'échec (local) / réessayer 2 fois (CI)
retries: process.env.CI ? 2 : 0,
// Utiliser à la fois les rapports en ligne de commande et HTML
reporter: [
['list'],
['html', { open: 'never' }],
],
});
utiliser la configuration commune
useLa configuration qu'il contient s'applique à tous les tests et projets :
| Élément de configuration | Type | Description |
|---|---|---|
baseURL | string | URL de base, les chemins relatifs peuvent être utilisés dans les tests (par ex.await page.goto('/login')） |
viewport | {width, height} | Taille de la fenêtre d'affichage du navigateur, par défaut{ width: 1280, height: 720 } |
locale | string | Langue du navigateur, par ex.'zh-CN'、'en-US' |
timezone | string | Fuseau horaire, par ex.'Asia/Shanghai' |
colorScheme | string | Schéma de couleurs :'light'｜'dark'｜'no-preference' |
geolocation | {latitude, longitude} | Géolocalisation simulée |
permissions | string[] | Autorisations du navigateur accordées (par ex.['geolocation']） |
userAgent | string | Chaîne User-Agent personnalisée |
trace | string | Stratégie de collecte des traces :'on'｜'off'｜'on-first-retry' |
screenshot | string | Stratégie de capture d'écran :'on'｜'off'｜'only-on-failure' |
video | string | Stratégie d'enregistrement vidéo :'on'｜'off'｜'retain-on-failure' |
storageState | string | Chemin du fichier d'état d'authentification |
testIdAttribute | string | Nom de l'attribut testId personnalisé, par défaut'data-testid' |
actionTimeout | nombre | Délai d'attente pour chaque opération (click, fill) |
navigationTimeout | nombre | Délai d'attente pour chaque navigation |
Configuration de webServer
webServerLa configuration permet à Playwright de démarrer automatiquement votre serveur de développement avant d'exécuter les tests :
Exemple
export default defineConfig({
webServer: {
// Commande de démarrage
command: 'npm run dev',
// Attendre que cette URL soit accessible avant d'exécuter les tests
url: 'http://localhost:5173',
// Durée d'attente du timeout (milliseconds)
timeout: 120000,
// S'il faut réutiliser un serveur déjà en cours d'exécution (réutilisation locale possible, redémarrage sur CI)
reuseExistingServer: !process.env.CI,
},
});
webServer: {
// Commande de démarrage
command: 'npm run dev',
// Attendre que cette URL soit accessible avant d'exécuter les tests
url: 'http://localhost:5173',
// Durée d'attente du timeout (milliseconds)
timeout: 120000,
// S'il faut réutiliser un serveur déjà en cours d'exécution (réutilisation locale possible, redémarrage sur CI)
reuseExistingServer: !process.env.CI,
},
});
globalSetup / globalTeardown Hooks globaux
Exécuté une fois avant/après l'exécution de tous les tests, adapté aux opérations telles que l'initialisation de la base de données.
Exemple
export default defineConfig({
globalSetup: './global-setup.ts',
globalTeardown: './global-teardown.ts',
});
globalSetup: './global-setup.ts',
globalTeardown: './global-teardown.ts',
});
Exemple
// Chemin du fichier : global-setup.ts
import { FullConfig } from '@playwright/test';
async function globalSetup(config: FullConfig) {
// Exécuté avant l'exécution de tous les tests
console.log('Démarrage de la configuration globale...');
// Par exemple : initialiser la base de données de test, créer des utilisateurs de test, etc.
}
export default globalSetup;
import { FullConfig } from '@playwright/test';
async function globalSetup(config: FullConfig) {
// Exécuté avant l'exécution de tous les tests
console.log('Démarrage de la configuration globale...');
// Par exemple : initialiser la base de données de test, créer des utilisateurs de test, etc.
}
export default globalSetup;