Usar storageState() para la Autenticación

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Autenticación de pruebas utilizando las cookies de sesión guardadas de Playwright

Not for use with personal data

Si tus pruebas requieren sesiones autenticadas, puedes usar storageState() de Playwright para cargar cookies de autenticación previamente guardadas en el contexto del navegador. Dado que Axe Watcher utiliza sus propias fixtures de Playwright, debes fusionar la fixture de autenticación con la fixture de Axe Watcher usando mergeTests.

Archivo de Fixtures

Crea un archivo fixtures.ts que lea las cookies de un archivo storageState.json guardado y las inyecte en el BrowserContext de Playwright:

import { readFileSync } from 'fs'
import { test as base, type BrowserContext, mergeTests } from '@playwright/test'
import { playwrightTest } from '@axe-core/watcher/playwright-test'

// Environment variables for Axe Developer Hub
const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const SERVER_URL = process.env.SERVER_URL

// Configure Axe Watcher
const { test: watcherTest, expect } = playwrightTest({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID,
    serverURL: SERVER_URL
  },
  headless: false
})

// Custom fixture: Cookie-based authentication
class AuthCookie {
  #context: BrowserContext

  constructor(context: BrowserContext) {
    this.#context = context
  }

  async inject() {
    await this.#context.addCookies(
      JSON.parse(readFileSync('storageState.json', 'utf-8')).cookies
    )
  }
}

// Define auth cookie fixture
const authCookieFixture = base.extend<{ authCookie: AuthCookie }>({
  authCookie: async ({ context }, use) => {
    const auth = new AuthCookie(context)
    await use(auth)
  }
})

// Merge fixtures
const test = mergeTests(authCookieFixture, watcherTest)

// Export merged test and expect
export { test, expect }

Uso en Pruebas

En tus archivos de prueba, llama a authCookie.inject() antes de navegar a páginas autenticadas:

import { test, expect } from './fixtures'

test('should display accessible authenticated page', async ({ page, authCookie }) => {
  await authCookie.inject()
  await page.goto('https://example.com/authenticated-page')

  // Accessibility testing happens automatically
})
note

Genera storageState.json antes de ejecutar tus pruebas utilizando configuración global de Playwright. Este archivo contiene cookies de autenticación y no debe ser incluido en el control de versiones.

Ver También