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
  1. テストフォルダのルートレベルで、@axe-core/watcherパッケージとそのすべての依存関係をnpmまたはお好みのパッケージマネージャー(例えば、yarnpnpm)を使用してインストールします。

    npm install --save-dev @axe-core/watcher
  2. テストファイルでは、playwrightConfig() 関数、wrapPlaywright() 関数、および PlaywrightController クラスを @axe-core/watcher/playwright からインポートします:

    import {
      wrapPlaywrightPage,
      playwrightConfig,
      PlaywrightController
    } from '@axe-core/watcher/playwright';
  3. テストセットアップコード(通常は 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_KEYPROJECT_ID を環境に設定し、個人用 API キー(Axe アカウントの**API KEYS**タブで見つかります)とプロジェクト ID(プロジェクトを作成した際にこれらの指示の上部に表示されるか、プロジェクトページで**プロジェクトを設定**を選択して**設定**から入手できます)を使用してください。組織が地域のプライベートクラウドやオンプレミスの Axe Developer Hub インスタンスを使用している場合は、そのインスタンスのベース URL をSERVER_URLに設定してください(例: https://axe-eu.deque.com)。それ以外の場合、SERVER_URLを省略し、デフォルトのhttps://axe.deque.comが使用されます。

  4. 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);
  5. 最後に、Axe Watcher のすべてのテスト結果がクリアされていることを確認してください。これを行うには、次のコードブロックをテストの終了処理コード(通常は afterEach ブロック内)に追加します。

    afterEach(async () => {
      await controller.flush()
    })