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

WebDriverJSとJavaScriptでテストを設定する

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

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

    const {
      webdriverConfig,
      wrapWebdriver,
      WebdriverController
    } = require('@axe-core/watcher/webdriver')
  3. テストセットアップコードを更新します(通常は before または beforeAll ブロック内)、Chromeのオプションを指定して browser インスタンスを生成し、APIキーを提供します:

    // Original code:
    let browser = await new Builder()
      .forBrowser('chrome')
      .build()
    
    // Becomes:
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    
    let browser = await new Builder()
      .forBrowser('chrome')
      .setChromeOptions(
        webdriverConfig({
          axe: {
            apiKey: ACCESSIBILITY_API_KEY,
            projectId: PROJECT_ID
          }
        }
      )
      .build()

    必ず環境で ACCESSIBILITY_API_KEYPROJECT_ID を設定し、自分のAPIキー(axeアカウントで見つかります、 **API KEYS** タブ)とプロジェクトID(プロジェクトを作成したときのこれらの指示の上部に表示されるか、 **プロジェクトの構成** を選択してプロジェクトページから利用可能です) **設定**の下にあります。

  4. のインスタンスを作成します: WebdriverController

    const controller = new WebdriverController(browser)
  5. インスタンスを browser 関数でラップします: wrapWebdriver()

    browser = wrapWebdriver(browser, controller)
  6. 最後に、axe Watcherからのすべてのテスト結果がフラッシュアウトされることを確認します。そのためには、テストのティアダウンコード(通常は afterEach ブロック内)に次のコードブロックを追加します:

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