Test-Fixtures für 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 verwenden für Organisationen, die bereits Playwright-Test-Figuren nutzen

Not for use with personal data

Wenn Ihre Organisation bereits Playwright-Test-Figuren in Ihren Testsuites verwendet, müssen Sie Ihre bestehenden Fixtures mit denen von Axe Watcher zusammenführen, um Barrierefreiheitstests zu ermöglichen. Dieser Leitfaden führt Sie durch den Integrationsprozess.

Das Problem verstehen

Playwright Test ermöglicht das Erstellen von benutzerdefinierten Fixtures, die die grundlegende Testfunktionalität erweitern. Diese Fixtures können z. B. Mockdaten, gemeinsame Einrichtungslogik oder wiederverwendbare Test-Utilities bereitstellen. Wenn Sie Axe Watcher einführen, welches ebenfalls Fixtures für Barrierefreiheitstests nutzt, müssen Sie die beiden Sets von Fixtures mit mergeTests kombinieren, um sicherzustellen, dass sie zusammenarbeiten.

Ohne Zusammenführung werden Ihre Tests fehlschlagen, da Playwright Ihre benutzerdefinierten Fixtures bei Verwendung der Axe Watcher-Testkonfiguration nicht erkennt.

Grundlegende Integrationsschritte

Schritt 1: Importieren benötigter Funktionen

Beginnen Sie mit dem Import der notwendigen Funktionen aus Playwright Test und Axe Watcher:

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

Die mergeTests() -Funktion ist der Schlüssel, um Ihre benutzerdefinierten Fixtures mit den Fixtures von Axe Watcher zu kombinieren.

Schritt 2: Erstellen Sie Ihre benutzerdefinierten Fixtures

Definieren Sie Ihre bestehenden benutzerdefinierten Fixtures wie gewohnt. Zum Beispiel, wenn Sie eine Mock-Benutzer-Figur für Authentifizierungstests haben:

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

Schritt 3: Konfigurieren von Axe Watcher

Richten Sie Ihre Axe Watcher-Konfiguration mit Ihren API-Zugangsdaten ein:

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

Schritt 4: Die Fixtures zusammenführen

Verwenden Sie mergeTests, um Ihre benutzerdefinierten Fixtures mit den Fixtures von Axe Watcher zu kombinieren:

const test = mergeTests(customFixtures, watcherTest)

export { test, expect }

Vollständiges Beispiel

Hier ist ein umfassendes Beispiel, das die gesamte Integration zeigt:

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 }

Verwendung der zusammengeführten Fixtures in Tests

Sobald Sie die zusammengeführten Fixtures eingerichtet haben, verwenden Sie diese in Ihren Testdateien, indem Sie aus Ihrer Fixtures-Datei importieren:

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

Mehrere benutzerdefinierte Fixtures

Wenn Sie mehrere benutzerdefinierte Fixtures haben, können Sie diese alle zusammenführen:

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

Erweiterte Konfigurationsoptionen

Sie können das Verhalten von Axe Watcher anpassen und gleichzeitig Ihre benutzerdefinierten Fixtures beibehalten:

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

Fehlerbehebung

Fehler 'Fixture nicht verfügbar'

Wenn Sie einen Fehler wie Property 'mockUser' does not exist on type sehen, stellen Sie sicher, dass Sie:

Die Fixtures richtig mit mergeTests zusammengeführt haben
test aus Ihrer zusammengeführten Fixtures-Datei und nicht direkt aus @playwright/test importiert haben
Sowohl test als auch expect aus Ihrer Fixtures-Datei exportiert haben

Probleme mit der Typsicherheit

Stellen Sie bei TypeScript-Projekten sicher, dass Ihre benutzerdefinierten Fixture-Typen richtig definiert sind:

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