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

PuppeteerとJavaScriptでのテストの設定方法

Not for use with personal data

  1. テストフォルダーのルートレベルで、@axe-core/watcherパッケージとそのすべての依存関係をnpmまたはお好みのパッケージマネージャー（例えば、yarnあるいはpnpm）を使用してインストールします。

    npm install --save-dev @axe-core/watcher

  2. テストファイルに、 puppeteerConfig() 関数、 wrapPuppeteer() 関数、および PuppeteerController クラスをインポートします @axe-core/watcher/puppeteer：

    const {
  puppeteerConfig,
  wrapPuppeteerPage,
  PuppeteerController
} = require('@axe-core/watcher/puppeteer')

  3. テストのセットアップコード（通常 before または beforeAll ブロック内）を更新し、 browser インスタンスを作成する既存のコードを puppeteerConfig()で呼び出し、APIキーを提供します：

    const 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 browser = await puppeteer.launch(
  puppeteerConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    // Your existing launch options...
  })
)

    必ず、ACCESSIBILITY_API_KEYとPROJECT_IDを環境に設定し、あなたの個人用APIキー（AxeアカウントのAPI KEYSタブにあります）とプロジェクトID（プロジェクト作成時のこの手順の上部に表示されるか、プロジェクトページで設定の下にあるプロジェクトを設定を選択することで確認可能です）を使用してください。

  4. のインスタンスを作成し、Puppeteerをラップします PuppeteerController ： browserContext

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

Is this page helpful?

Help us improve this page

Still need help?