Impostazioni di Test per 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

Utilizzo di Axe Watcher per le organizzazioni che già utilizzano le impostazioni di Playwright Test

Not for use with personal data

Se la vostra organizzazione utilizza già impostazioni di Playwright Test nelle vostre suite di test, dovrete unire le vostre impostazioni esistenti con quelle di Axe Watcher per abilitare i test di accessibilità. Questa guida vi guiderà attraverso il processo di integrazione.

Comprendere la Sfida

Playwright Test consente di creare impostazioni personalizzate che estendono la funzionalità di test di base. Queste impostazioni possono fornire dati mock, logiche di configurazione condivise o utilità di test riutilizzabili. Quando si introduce Axe Watcher, che utilizza anch'esso impostazioni per i test di accessibilità, è necessario combinare i due set di impostazioni usando mergeTests per garantire che funzionino insieme.

Senza un'unione, i vostri test falliranno perché Playwright non riconoscerà le vostre impostazioni personalizzate quando si utilizza la configurazione di test di Axe Watcher.

Passi Base per l'Integrazione

Passo 1: Importare le Funzioni Necessarie

Iniziate importando le funzioni necessarie da Playwright Test e Axe Watcher:

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

La funzione mergeTests() è la chiave per combinare le vostre impostazioni personalizzate con quelle di Axe Watcher.

Passo 2: Creare le Vostre Impostazioni Personalizzate

Definite le vostre impostazioni personalizzate esistenti come fareste normalmente. Ad esempio, se avete un'impostazione mock per un utente per i test di autenticazione:

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: Configurare Axe Watcher

Configurate la vostra configurazione di Axe Watcher con le vostre credenziali 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: Unire le Impostazioni

Utilizzate mergeTests per combinare le vostre impostazioni personalizzate con quelle di Axe Watcher:

const test = mergeTests(customFixtures, watcherTest)

export { test, expect }

Esempio Completo

Ecco un esempio completo che mostra l'integrazione completa:

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 }

Utilizzare le Impostazioni Unificate nei Test

Una volta configurate le impostazioni unificate, utilizzatele nei vostri file di test importando dal vostro file di impostazioni:

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

Impostazioni Personalizzate Multiple

Se avete più impostazioni personalizzate, potete unirle tutte insieme:

// 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 }

Opzioni di Configurazione Avanzate

Potete personalizzare il comportamento di Axe Watcher mantenendo le vostre impostazioni personalizzate:

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']
})

Risoluzione dei Problemi

Errore Impostazione Non Disponibile

Se vedete un errore come Property 'mockUser' does not exist on type, assicuratevi di aver:

Unito correttamente le impostazioni utilizzando mergeTests
Importato test dal vostro file di impostazioni unificate, non direttamente da @playwright/test
Esportato sia test che expect dal vostro file di impostazioni

Problemi di Sicurezza dei Tipi

Per i progetti TypeScript, assicuratevi che i tipi delle vostre impostazioni personalizzate siano definiti correttamente:

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