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

すでにPlaywright Testフィクスチャを使用している組織のためのAxe Watcherの利用

Not for use with personal data

組織ですでにPlaywright Testフィクスチャをテストスイートで使用している場合、アクセシビリティテストを有効にするために既存のフィクスチャとAxe Watcherのフィクスチャを統合する必要があります。このガイドでは、その統合プロセスを説明します。

課題の理解

Playwright Testでは、基本的なテスト機能を拡張するカスタムフィクスチャを作成できます。これらのフィクスチャは、モックデータ、共有設定ロジック、再利用可能なテストユーティリティを提供することがあります。Axe Watcherを導入する際、アクセシビリティテスト用のフィクスチャを使用するため、mergeTestsを使用して2つのフィクスチャセットを組み合わせて、それらが一緒に機能するようにする必要があります。

統合しないと、Axe Watcherのテスト構成を使用する際にPlaywrightがカスタムフィクスチャを認識しないため、テストが失敗します。

基本的な統合手順

ステップ1：必要な関数をインポート

まず、Playwright TestとAxe Watcherから必要な関数をインポートします。

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

mergeTests()関数は、カスタムフィクスチャとAxe Watcherのフィクスチャを組み合わせる鍵となります。

ステップ2：カスタムフィクスチャを作成

通常どおり、既存のカスタムフィクスチャを定義します。たとえば、認証テスト用のモックユーザーフィクスチャがある場合：

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

ステップ3：Axe Watcherを設定

APIクレデンシャルを使用してAxe Watcherの設定を行います。

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

ステップ4：フィクスチャを統合

mergeTestsを使ってカスタムフィクスチャとAxe Watcherのフィクスチャを組み合わせます。

const test = mergeTests(customFixtures, watcherTest)

export { test, expect }

完全な例

ここでは、統合全体を示す包括的な例を紹介します。

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 }

テストでの統合フィクスチャの使用

統合フィクスチャを設定したら、フィクスチャファイルからインポートしてテストファイルで使用します。

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

複数のカスタムフィクスチャ

複数のカスタムフィクスチャがある場合は、それらをすべて組み合わせることができます。

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

高度な設定オプション

カスタムフィクスチャを維持しながら、Axe Watcherの動作をカスタマイズできます。

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

トラブルシューティング

フィクスチャが利用できないエラー

Property 'mockUser' does not exist on typeのようなエラーが表示されたら、次を確認してください。

mergeTestsを使用して正しくフィクスチャを統合したか
testをマージしたフィクスチャファイルからインポートし、@playwright/testから直接インポートしていないか
フィクスチャファイルからtestとexpectの両方をエクスポートしたか

型の安全性の問題

TypeScriptプロジェクトの場合は、カスタムフィクスチャの型が正しく定義されていることを確認してください。

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