Testfixtures voor 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

Axe Watcher gebruiken voor organisaties die al Playwright Testfixtures gebruiken

Not for use with personal data

Als uw organisatie al Playwright Testfixtures in uw testsuites gebruikt, moet u uw bestaande fixtures samenvoegen met de fixtures van Axe Watcher om toegankelijkheidstesten in te schakelen. Deze gids leidt u door het integratieproces.

De Uitdaging Begrijpen

Playwright Test stelt u in staat om aangepaste fixtures te maken die de basis testfunctionaliteit uitbreiden. Deze fixtures kunnen voorbeeldgegevens, gedeelde instellogica of herbruikbare testhulpprogramma's bieden. Wanneer u Axe Watcher introduceert, dat ook fixtures gebruikt voor toegankelijkheidstesten, moet u de twee sets fixtures combineren met behulp van mergeTests om ervoor te zorgen dat ze samenwerken.

Zonder samenvoeging zullen uw tests falen omdat Playwright uw aangepaste fixtures niet herkent bij gebruik van de testconfiguratie van Axe Watcher.

Basis Integratiestappen

Stap 1: Vereiste Functies Importeren

Begin met het importeren van de noodzakelijke functies van Playwright Test en Axe Watcher:

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

De mergeTests() functie is de sleutel tot het combineren van uw aangepaste fixtures met die van Axe Watcher.

Stap 2: Uw Aangepaste Fixtures Maken

Definieer uw bestaande aangepaste fixtures zoals u normaal zou doen. Bijvoorbeeld, als u een voorbeeldgebruikersfixture heeft voor authenticatietests:

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

Stap 3: Axe Watcher Configureren

Stel uw Axe Watcher-configuratie in met uw API-credentials:

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

Stap 4: De Fixtures Samenvoegen

Gebruik mergeTests om uw aangepaste fixtures te combineren met de fixtures van Axe Watcher:

const test = mergeTests(customFixtures, watcherTest)

export { test, expect }

Volledig Voorbeeld

Hier is een uitgebreid voorbeeld dat de gehele integratie laat zien:

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 }

De Samengevoegde Fixtures in Tests Gebruiken

Zodra u de samengevoegde fixtures hebt ingesteld, gebruikt u ze in uw testbestanden door te importeren vanuit uw fixtures-bestand:

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

Meerdere Aangepaste Fixtures

Als u meerdere aangepaste fixtures heeft, kunt u ze allemaal samenvoegen:

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

Geavanceerde Configuratieopties

U kunt het gedrag van Axe Watcher aanpassen terwijl u uw aangepaste fixtures behoudt:

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

Problemen Oplossen

Fixture Niet Beschikbaar Fout

Als u een fout ziet zoals Property 'mockUser' does not exist on type, zorg ervoor dat u:

De fixtures op de juiste manier hebt samengevoegd met mergeTests
test uit uw samengevoegde fixtures-bestand hebt geïmporteerd, niet rechtstreeks uit @playwright/test
Zowel test als expect uit uw fixtures-bestand hebt geëxporteerd

Type Veiligheidsproblemen

Zorg ervoor dat voor TypeScript-projecten uw aangepaste fixturetypes correct gedefinieerd zijn:

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