Fixtures de test pour 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

Utilisation de l'outil Axe Watcher pour les organisations qui utilisent déjà les fixtures Playwright Test

Not for use with personal data

Si votre organisation utilise déjà fixtures Playwright Test dans vos suites de tests, vous devrez fusionner vos fixtures existantes avec celles d'Axe Watcher pour activer les tests d'accessibilité. Ce guide vous accompagne dans le processus d'intégration.

Comprendre le défi

Playwright Test vous permet de créer des fixtures personnalisées qui étendent les fonctionnalités de base des tests. Ces fixtures peuvent fournir des données simulées, une logique de configuration partagée ou des utilitaires de test réutilisables. Lorsque vous introduisez Axe Watcher, qui utilise également des fixtures pour les tests d'accessibilité, vous devez combiner les deux ensembles de fixtures avec mergeTests pour vous assurer qu'ils fonctionnent ensemble.

Sans fusion, vos tests échoueront car Playwright ne reconnaîtra pas vos fixtures personnalisées lors de l'utilisation de la configuration de test Axe Watcher.

Étapes d'intégration de base

Étape 1 : Importer les fonctions requises

Commencez par importer les fonctions nécessaires depuis Playwright Test et Axe Watcher :

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

La fonction mergeTests() est essentielle pour combiner vos fixtures personnalisées avec celles d'Axe Watcher.

Étape 2 : Créer vos fixtures personnalisées

Définissez vos fixtures personnalisées existantes comme vous le feriez normalement. Par exemple, si vous avez une fixture utilisateur simulée pour les tests d'authentification :

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

Étape 3 : Configurer Axe Watcher

Configurez votre Axe Watcher avec vos identifiants d'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
  },
})

Étape 4 : Fusionner les fixtures

Utilisez mergeTests pour combiner vos fixtures personnalisées avec celles d'Axe Watcher :

const test = mergeTests(customFixtures, watcherTest)

export { test, expect }

Exemple complet

Voici un exemple complet montrant toute l'intégration :

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 }

Utilisation des fixtures fusionnées dans les tests

Une fois les fixtures fusionnées configurées, utilisez-les dans vos fichiers de test en important depuis votre fichier 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
})

Plusieurs fixtures personnalisées

Si vous avez plusieurs fixtures personnalisées, vous pouvez les fusionner toutes ensemble :

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

Options de configuration avancées

Vous pouvez personnaliser le comportement d'Axe Watcher tout en maintenant vos fixtures personnalisées :

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

Dépannage

Erreur de fixture non disponible

Si vous voyez une erreur comme Property 'mockUser' does not exist on type, assurez-vous que vous avez :

Correctement fusionné les fixtures en utilisant mergeTests
Importé test depuis votre fichier de fixtures fusionnées, pas directement depuis @playwright/test
Exporté à la fois test et expect depuis votre fichier de fixtures

Problèmes de sécurité des types

Pour les projets TypeScript, assurez-vous que vos types de fixtures personnalisées sont correctement définis :

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