Puppeteerと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

PuppeteerとTypeScriptでテストを設定する

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

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

    import {
      puppeteerConfig,
      wrapPuppeteerPage,
      PuppeteerController
    } from '@axe-core/watcher/puppeteer'
  3. テストセットアップコード(通常はbeforeブロックまたはbeforeAllブロック内)を、browserインスタンスを作成する既存のコードをpuppeteerConfig()への呼び出しでラップし、環境からAPIキーを取得するように更新します(ACCESSIBILITY_API_KEYとして):

    // Original code:
    
    browser = await puppeteer.launch({
      // Your existing launch options...
    })
    
    // Becomes:
    
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    const SERVER_URL = process.env.SERVER_URL
    
    const browser = await puppeteer.launch(
      puppeteerConfig({
        axe: {
          apiKey: ACCESSIBILITY_API_KEY,
          projectId: PROJECT_ID,
          serverURL: SERVER_URL
        },
        headless: false
      })
    );

    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. PuppeteerControllerのインスタンスを作成し、PuppeteerbrowserContextをラップします:

    // Create a page instance, using your browser instance.
    let page = await browser.newPage()
    
    // Initialize the PuppeteerController by passing in the Puppeteer page.
    const controller = new PuppeteerController(page)
    
    // Use the new wrapped Puppeteer page instance.
    page = wrapPuppeteerPage(page, controller)
  5. 最後に、Axe Watcher からのすべてのテスト結果がクリアされていることを確認します。そのためには、次のコードブロックをテストのティアダウンコードに追加します(通常は afterEach ブロック内にあります)。

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