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

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

    const {
      wrapPlaywrightPage,
      playwrightConfig,
      PlaywrightController
    } = require('@axe-core/watcher/playwright')
  3. テストセットアップコード(通常はbeforeまたはbeforeAllブロックで)で、browserContextインスタンスを作成する既存のコードをplaywrightConfig()を呼び出してAPIキーを提供しながらラップします:

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