Playwright Autenticación (Authentication)

Este capítulo explica cómo manejar la autenticación en Playwright, evitando repetir el inicio de sesión en cada prueba y manteniendo al mismo tiempo el aislamiento de las pruebas.

El problema central de la autenticación

La mayoría de las pruebas de aplicaciones web requieren que el usuario inicie sesión.

Si cada prueba ejecuta el flujo de inicio de sesión desde cero, la velocidad de las pruebas se ralentizará significativamente.

La solución de Playwright es:Autenticarse una vez, guardar el estado y reutilizarlo en todas las pruebas。

Preparación: directorio .auth

Ejemplo

# Crear el directorio de almacenamiento del estado de autenticación
mkdir -p playwright/.auth

# Agregar a .gitignore (el estado de autenticación contiene información confidencial)
echo 'playwright/.auth' >> .gitignore

.authEl archivo contiene cookies sensibles y tokens de autenticación,y nunca debe enviarse al repositorio de código。

Enfoque básico: cuenta compartida + proyecto Setup

Este es el esquema de autenticación recomendado por Playwright, adecuado para escenarios donde todas las pruebas comparten la misma cuenta de prueba.

Primer paso: crear el Setup de autenticación

Ejemplo

// Ruta del archivo: tests/auth.setup.ts
import { test as setup } from '@playwright/test';

// Especificar la ruta de guardado del estado de autenticación
const authFile = 'playwright/.auth/user.json';

setup('authenticate', async ({ page }) => {
  // Ejecutar la operación de inicio de sesión
  await page.goto('https://www.example.com/login');
  await page.getByLabel('nombre de usuario').fill('testuser');
  await page.getByLabel('contraseña').fill('password123');
  await page.getByRole('button', { name: 'Iniciar sesión' }).click();

  // Esperar a que se complete el inicio de sesión (confirmar la redirección de la página o la aparición de la información del usuario)
  await page.waitForURL(/dashboard/);

  // Guardar el estado de autenticación actual (cookies, localStorage) en un archivo
  await page.context().storageState({ path: authFile });
});

Segundo paso: configurar el proyecto Setup

Ejemplo

// Ruta del archivo: playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  projects: [
    // Proyecto Setup — se ejecuta solo una vez y genera el archivo de estado de autenticación
    {
      name: 'setup',
      testMatch: /auth\.setup\.ts/,
    },

    // Proyecto de pruebas real — reutiliza el estado de autenticación
    {
      name: 'chromium',
      use: {
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],    // Depende del proyecto setup para garantizar que setup se ejecute primero
    },
  ],
});

Tercer paso: las pruebas usan directamente el estado de autenticación

Ejemplo

// Ruta del archivo: tests/dashboard.spec.ts
import { test, expect } from '@playwright/test';

test('Ver el panel', async ({ page }) => {
  // Acceder directamente a la página que requiere inicio de sesión; page ya contiene el estado de autenticación
  await page.goto('/dashboard');
  await expect(page.getByText('Bienvenido de nuevo, testuser')).toBeVisible();
});

Escenario de múltiples cuentas

Si diferentes pruebas necesitan usar diferentes cuentas, se pueden crear múltiples archivos de estado de autenticación.

Ejemplo

// Prueba de administrador
test.describe('Funciones de administrador', () => {
  test.use({ storageState: 'playwright/.auth/admin.json' });

  test('Gestionar usuarios', async ({ page }) => {
    // Operar como administrador
  });
});

// Prueba de usuario normal
test.describe('Funciones de usuario normal', () => {
  test.use({ storageState: 'playwright/.auth/user.json' });

  test('Explorar contenido', async ({ page }) => {
    // Operar como usuario normal
  });
});

Autenticación mediante solicitudes API (recomendado)

Ejecutar el flujo de inicio de sesión a través de la UI es lento; una forma más eficiente es llamar directamente a la API de inicio de sesión.

Ejemplo

// Ruta del archivo: tests/auth.setup.ts
import { test as setup } from '@playwright/test';

const authFile = 'playwright/.auth/user.json';

setup('Autenticación mediante API', async ({ request }) => {
  // Llamar directamente a la API de inicio de sesión, sin pasar por la UI del navegador
  const response = await request.post('https://www.example.com/api/login', {
    data: {
      username: 'testuser',
      password: 'password123',
    },
  });

  // Confirmar que el inicio de sesión fue exitoso
  const json = await response.json();
  console.log('Inicio de sesión exitoso, Token:', json.token);

  // Guardar el Token como cookie (simulando el estado de autenticación del navegador)
  // Nota: storageState debe guardarse en el Context del navegador
});

La autenticación por API es más rápida y confiable que la autenticación por UI; se recomienda usarla preferentemente en proyectos reales.

Resumen de escenarios aplicables de los esquemas de autenticación

EscenarioEsquema recomendado
Todas las pruebas usan la misma cuenta de pruebaProyecto Setup + storageState
Diferentes tipos de pruebas necesitan diferentes cuentasMúltiples storageState + test.use
Cada prueba necesita una cuenta independienteCrear cuenta e iniciar sesión mediante API dentro de cada prueba
Recursos de cuenta limitadosAutenticación una sola vez en el proyecto Setup, reutilización completa
Otras extensiones