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 インスタンスを作成する既存のコードを、API キーを提供しながら playwrightConfig() を呼び出すことでラップしてください：


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

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,
      serverURL: SERVER_URL
    },
    /**
     * 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（プロジェクト作成時の手順の最上部か、プロジェクトページで**設定**の下にある**プロジェクトを設定**を選択して取得可能）にしてください。組織が地域的、プライベートクラウド、またはオンプレミスのAxe Developer Hubインスタンスを使用している場合は、そのインスタンスのベースURLをSERVER_URLに設定します（例: https://axe-eu.deque.com）。そうでない場合は、SERVER_URLを省略し、デフォルトのhttps://axe.deque.comが使用されます。

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?