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()
    });