Testes de Fixture 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

Usando Axe Watcher para organizações que já utilizam as fixtures do Playwright Test

Not for use with personal data

Se a sua organização já utiliza as fixtures do Playwright Test em suas suítes de teste, será necessário mesclar suas fixtures existentes com as fixtures do Axe Watcher para habilitar os testes de acessibilidade. Este guia orienta você no processo de integração.

Entendendo o Desafio

O Playwright Test permite criar fixtures personalizadas que ampliam a funcionalidade base do teste. Essas fixtures podem fornecer dados simulados, lógica de configuração compartilhada ou utilitários de teste reutilizáveis. Ao introduzir o Axe Watcher, que também usa fixtures para testes de acessibilidade, é necessário combinar os dois conjuntos de fixtures usando mergeTests para garantir que funcionem juntos.

Sem a mesclagem, seus testes falharão porque o Playwright não reconhecerá suas fixtures personalizadas ao usar a configuração de teste do Axe Watcher.

Passos Básicos de Integração

Passo 1: Importe as Funções Necessárias

Comece importando as funções necessárias do Playwright Test e do Axe Watcher:

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

A função mergeTests() é a chave para combinar suas fixtures personalizadas com as fixtures do Axe Watcher.

Passo 2: Crie Suas Fixtures Personalizadas

Defina suas fixtures personalizadas existentes como você normalmente faria. Por exemplo, se você tiver uma fixture de usuário simulado para teste de autenticação:

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())
  }
})

Passo 3: Configure o Axe Watcher

Configure seu Axe Watcher com suas credenciais 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
  },
})

Passo 4: Mescle as Fixtures

Use mergeTests para combinar suas fixtures personalizadas com as fixtures do Axe Watcher:

const test = mergeTests(customFixtures, watcherTest)

export { test, expect }

Exemplo Completo

Aqui está um exemplo abrangente mostrando toda a integração:

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 }

Usando as Fixtures Mescladas em Testes

Depois de configurar as fixtures mescladas, use-as em seus arquivos de teste importando do seu arquivo de fixtures:

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últiplas Fixtures Personalizadas

Se você tiver várias fixtures personalizadas, pode mesclá-las 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 }

Opções Avançadas de Configuração

Você pode personalizar o comportamento do Axe Watcher enquanto mantém suas fixtures 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']
})

Solução de Problemas

Erro de Fixture Não Disponível

Se você ver um erro como Property 'mockUser' does not exist on type, certifique-se de que:

Mesclou corretamente as fixtures usando mergeTests
Importou test do seu arquivo de fixtures mescladas, não diretamente de @playwright/test
Exportou tanto test quanto expect do seu arquivo de fixtures

Problemas de Segurança de Tipos

Para projetos TypeScript, certifique-se de que seus tipos de fixtures personalizados estejam devidamente 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())
  }
})