Explicación detallada de la configuración de Playwright
Este capítulo describe en detalleplaywright.config.tslas diversas configuraciones en él, lo que te permite ajustar el comportamiento de las pruebas de manera flexible según las necesidades del proyecto.
Descripción general del archivo de configuración
playwright.config.tsEs el archivo de configuración central de Playwright; todos los parámetros de ejecución de las pruebas se definen aquí.
Ejemplo
// Ruta del archivo: playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
// ===== Configuración básica =====
testDir: './tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
timeout: 30000,
// ===== Configuración global compartida =====
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
// ===== Proyectos de múltiples navegadores =====
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
// ===== Servidor web =====
webServer: {
command: 'npm run start',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
// ===== Configuración básica =====
testDir: './tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
timeout: 30000,
// ===== Configuración global compartida =====
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
// ===== Proyectos de múltiples navegadores =====
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
// ===== Servidor web =====
webServer: {
command: 'npm run start',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
Elementos de configuración básicos
| Elemento de configuración | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
testDir | string | tests | Directorio donde se encuentran los archivos de prueba |
fullyParallel | boolean | false | Si ejecutar todas las pruebas completamente en paralelo (incluidas las pruebas dentro del mismo archivo) |
workers | number | Número de núcleos de CPU/2 | Número de workers que se ejecutan en paralelo |
retries | number | 0 | Número de reintentos para pruebas fallidas |
timeout | number | 30000 | Tiempo de espera total por prueba (milisegundos) |
reporter | string/array | list | Tipo de reportero de pruebas |
forbidOnly | boolean | false | Fallar si se detecta test.only() en CI |
testMatch | string/RegExp | *.spec.(ts\|js) | Patrón de coincidencia para archivos de prueba |
testIgnore | string/RegExp | - | Patrón de archivos de prueba ignorados |
Ejemplo de configuración
Ejemplo
export default defineConfig({
// Buscar pruebas en el directorio e2e
testDir: './e2e',
// Todas las pruebas completamente en paralelo
fullyParallel: true,
// Asignar automáticamente el número de workers
workers: undefined,
// Sin reintentos en caso de fallo (local) / Reintentar 2 veces (CI)
retries: process.env.CI ? 2 : 0,
// Usar tanto el informe de línea de comandos como el HTML
reporter: [
['list'],
['html', { open: 'never' }],
],
});
// Buscar pruebas en el directorio e2e
testDir: './e2e',
// Todas las pruebas completamente en paralelo
fullyParallel: true,
// Asignar automáticamente el número de workers
workers: undefined,
// Sin reintentos en caso de fallo (local) / Reintentar 2 veces (CI)
retries: process.env.CI ? 2 : 0,
// Usar tanto el informe de línea de comandos como el HTML
reporter: [
['list'],
['html', { open: 'never' }],
],
});
use Configuración común
useLa configuración en use se aplica a todas las pruebas y proyectos:
| Elemento de configuración | Tipo | Descripción |
|---|---|---|
baseURL | string | URL base; en las pruebas se pueden usar rutas relativas (comoawait page.goto('/login')） |
viewport | {width, height} | Tamaño de viewport del navegador, predeterminado{ width: 1280, height: 720 } |
locale | string | Idioma del navegador, como'zh-CN'、'en-US' |
timezone | string | Zona horaria, como'Asia/Shanghai' |
colorScheme | string | Esquema de colores:'light'｜'dark'｜'no-preference' |
geolocation | {latitude, longitude} | Simular ubicación geográfica |
permissions | string[] | Permisos de navegador otorgados (por ejemplo,['geolocation']） |
userAgent | string | Cadena User-Agent personalizada |
trace | string | Estrategia de recopilación de Trace:'on'｜'off'｜'on-first-retry' |
screenshot | string | Estrategia de capturas de pantalla:'on'｜'off'｜'only-on-failure' |
video | string | Estrategia de grabación de video:'on'｜'off'｜'retain-on-failure' |
storageState | string | Ruta del archivo de estado de autenticación |
testIdAttribute | string | Nombre de atributo testId personalizado, predeterminado'data-testid' |
actionTimeout | number | Tiempo de espera para cada operación (click, fill) |
navigationTimeout | number | Tiempo de espera para cada navegación |
Configuración de webServer
webServerLa configuración permite que Playwright inicie automáticamente tu servidor de desarrollo antes de ejecutar las pruebas:
Ejemplo
export default defineConfig({
webServer: {
// Comando de inicio
command: 'npm run dev',
// Esperar a que esta URL esté accesible antes de ejecutar las pruebas
url: 'http://localhost:5173',
// Tiempo máximo de espera (milisegundos)
timeout: 120000,
// Si reutilizar un servidor ya en ejecución (reutilizable localmente, reiniciar en CI)
reuseExistingServer: !process.env.CI,
},
});
webServer: {
// Comando de inicio
command: 'npm run dev',
// Esperar a que esta URL esté accesible antes de ejecutar las pruebas
url: 'http://localhost:5173',
// Tiempo máximo de espera (milisegundos)
timeout: 120000,
// Si reutilizar un servidor ya en ejecución (reutilizable localmente, reiniciar en CI)
reuseExistingServer: !process.env.CI,
},
});
Ganchos globales globalSetup / globalTeardown
Se ejecutan una vez antes/después de que se ejecuten todas las pruebas, adecuados para operaciones como la inicialización de la base de datos.
Ejemplo
export default defineConfig({
globalSetup: './global-setup.ts',
globalTeardown: './global-teardown.ts',
});
globalSetup: './global-setup.ts',
globalTeardown: './global-teardown.ts',
});
Ejemplo
// Ruta del archivo: global-setup.ts
import { FullConfig } from '@playwright/test';
async function globalSetup(config: FullConfig) {
// Se ejecuta antes de que se ejecuten todas las pruebas
console.log('Iniciando configuración global...');
// Por ejemplo: inicializar la base de datos de prueba, crear usuarios de prueba, etc.
}
export default globalSetup;
import { FullConfig } from '@playwright/test';
async function globalSetup(config: FullConfig) {
// Se ejecuta antes de que se ejecuten todas las pruebas
console.log('Iniciando configuración global...');
// Por ejemplo: inicializar la base de datos de prueba, crear usuarios de prueba, etc.
}
export default globalSetup;