PlaywrightとTypeScriptの手引き

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とTypeScriptを使ったテストの設定

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インポートします。
```
import {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} from '@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: BrowserContext = await 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とTypeScriptの手引き

Is this page helpful?

Help us improve this page

Still need help?