PlaywrightとJavaScriptの手順

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とJavaScriptでテストを構成する

Not for use with personal data

テストフォルダーのルートレベルで、@axe-core/watcherパッケージとそのすべての依存関係をnpmまたはお好みのパッケージマネージャー（例えば、yarnあるいはpnpm）を使用してインストールします。
```
npm install --save-dev @axe-core/watcher
```
テストファイルまたはファイル群で、 playwrightConfig() 関数、 wrapPlaywright() 関数、および PlaywrightController クラスをインポートします： @axe-core/watcher/playwright：
```
const {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} = require('@axe-core/watcher/playwright')
```

テストセットアップコード（通常は before または beforeAll ブロック内）に、既存のコードをラップして、 browserContext インスタンスを playwrightConfig() を呼び出しながら作成し、APIキーを提供します：

const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

const browserContext = await playwright.chromium.launchPersistentContext(
  /**
   * We set userDataDir to an empty string which saves
   * browser data to a temporary directory
   * @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context
   */
  '',
  playwrightConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    /**
     * We support both headless and headed mode with Chrome.
     * 
     * For headless mode:
     * - Use '--headless=chrome' for browsers v94-108.
     * - Use '--headless=new' for browsers v109+.
     * 
     * For headed mode:
     * - Remove the '--headless' flag.
     * 
     * @see https://playwright.dev/docs/chrome-extensions#headless-mode
    */
    headless: false,
    args: ['--headless=new']
  })
);

必ず、ACCESSIBILITY_API_KEYとPROJECT_IDを環境に設定し、あなたの個人用APIキー（AxeアカウントのAPI KEYSタブにあります）とプロジェクトID（プロジェクト作成時のこの手順の上部に表示されるか、プロジェクトページで設定の下にあるプロジェクトを設定を選択することで確認可能です）を使用してください。

一度 page インスタンスを作成したら、 PlaywrightController クラスのインスタンスを作成し、次をラップします： browserContext：

// Create a page instance, using your browser context.
let page = await browserContext.newPage();

// Initialize the PlaywrightController by passing in the Playwright page.
const controller = new PlaywrightController(page);

// Use the new wrapped Playwright page instance.
page = wrapPlaywrightPage(page, controller);

最後に、axe Watcherからの全てのテスト結果がフラッシュアウトされることを確認してください。そのためには、以下のコードブロックをテストのティアダウンコード（通常は afterEach ブロック内）に追加します：
```
afterEach(async () => {
  await controller.flush()
})
```

PlaywrightとJavaScriptの手順

Is this page helpful?

Help us improve this page

Still need help?