Configuraciones de Prueba para Playwright Test

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

Uso de Axe Watcher para organizaciones que ya utilizan configuraciones de prueba de Playwright Test

Not for use with personal data

Si su organización ya usa configuraciones de prueba de Playwright Test en sus conjuntos de pruebas, necesitará fusionar sus configuraciones existentes con las de Axe Watcher para habilitar las pruebas de accesibilidad. Esta guía le llevará a través del proceso de integración.

Comprender el Desafío

Playwright Test le permite crear configuraciones personalizadas que extienden la funcionalidad básica de prueba. Estas configuraciones podrían proporcionar datos simulados, lógica de configuración compartida o utilidades de prueba reutilizables. Cuando introduce Axe Watcher, que también utiliza configuraciones para pruebas de accesibilidad, necesita combinar los dos conjuntos de configuraciones usando mergeTests para asegurarse de que funcionen juntos.

Sin fusionarse, sus pruebas fallarán porque Playwright no reconocerá sus configuraciones personalizadas al usar la configuración de prueba de Axe Watcher.

Pasos Básicos de Integración

Paso 1: Importar las Funciones Requeridas

Comience importando las funciones necesarias de Playwright Test y Axe Watcher:

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

La función mergeTests() es la clave para combinar sus configuraciones personalizadas con las de Axe Watcher.

Paso 2: Crear sus Configuraciones Personalizadas

Defina sus configuraciones personalizadas existentes como lo haría normalmente. Por ejemplo, si tiene una configuración simulada de usuario para pruebas de autenticación:

class MockUser {
  #username = 'testuser'
  #password = 'SecurePassword123!'

  get username() {
    return this.#username
  }

  get password() {
    return this.#password
  }
}

const customFixtures = base.extend<{ mockUser: MockUser }>({
  mockUser: async ({}, use) => {
    await use(new MockUser())
  }
})

Paso 3: Configurar Axe Watcher

Configure su configuración de Axe Watcher con sus credenciales de API:

const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

const { test: watcherTest, expect } = playwrightTest({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID
  },
})

Paso 4: Fusionar las Configuraciones

Use mergeTests para combinar sus configuraciones personalizadas con las de Axe Watcher:

const test = mergeTests(customFixtures, watcherTest)

export { test, expect }

Ejemplo Completo

Aquí hay un ejemplo completo que muestra toda la integración:

import { test as base, 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

// Custom fixture: Mock user for authentication
class MockUser {
  #username = 'testuser'
  #password = 'SecurePassword123!'

  get username() {
    return this.#username
  }

  get password() {
    return this.#password
  }
}

// Define custom fixtures
const customFixtures = base.extend<{ mockUser: MockUser }>({
  mockUser: async ({}, use) => {
    await use(new MockUser())
  }
})

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

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

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

Uso de las Configuraciones Fusionadas en las Pruebas

Una vez que haya configurado las configuraciones fusionadas, úselas en sus archivos de prueba importando desde su archivo de configuraciones:

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

test('should login with accessible form', async ({ page, mockUser }) => {
  await page.goto('https://example.com/login')
  
  // Use your custom fixture
  await page.fill('#username', mockUser.username)
  await page.fill('#password', mockUser.password)
  await page.click('#login-button')
  
  // Verify successful login
  await expect(page.locator('.welcome-message')).toBeVisible()
  
  // Accessibility testing happens automatically
})

Múltiples Configuraciones Personalizadas

Si tiene múltiples configuraciones personalizadas, puede fusionarlas todas juntas:

// Define multiple fixture sets
const userFixtures = base.extend<{ mockUser: MockUser }>({
  mockUser: async ({}, use) => {
    await use(new MockUser())
  }
})

const apiFixtures = base.extend<{ apiClient: ApiClient }>({
  apiClient: async ({}, use) => {
    await use(new ApiClient())
  }
})

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

// Merge all fixtures
const test = mergeTests(userFixtures, apiFixtures, watcherTest)

export { test, expect }

Opciones Avanzadas de Configuración

Puede personalizar el comportamiento de Axe Watcher mientras mantiene sus configuraciones personalizadas:

const { test: watcherTest, expect } = playwrightTest({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID,
    autoAnalyze: true,
    configurationOverrides: {
      accessibilityStandard: 'WCAG 2.2 AA',
      bestPractices: true,
      experimentalRules: false
    }
  },
  args: ['--headless=new']
})

Resolución de Problemas

Error de Configuración No Disponible

Si ve un error como Property 'mockUser' does not exist on type, asegúrese de que ha:

Fusionado correctamente las configuraciones usando mergeTests
Importado test desde su archivo de configuraciones fusionadas, no directamente desde @playwright/test
Exportado tanto test como expect desde su archivo de configuraciones

Problemas de Seguridad de Tipo

Para proyectos de TypeScript, asegúrese de que los tipos de sus configuraciones personalizadas estén correctamente definidos:

type CustomFixtures = {
  mockUser: MockUser
  apiClient: ApiClient
}

const customFixtures = base.extend<CustomFixtures>({
  mockUser: async ({}, use) => {
    await use(new MockUser())
  },
  apiClient: async ({}, use) => {
    await use(new ApiClient())
  }
})