Axe Watcher で使うためのブラウザの設定と構成

Axe Watcher は以下のブラウザをサポートしています：

• テスト用Google Chrome
• Chromium
• Microsoft Edge (JavaScript/TypeScript または Playwright を使用した Java; Java Selenium ではサポートされていません)

Playwright と Puppeteer はブラウザのインストールを自動的に行います：これらは常に Axe Watcher がサポートしている Chromium バージョンをダウンロードするため、これらのプラットフォームでは自分でブラウザバイナリをインストールする必要はありません。WebdriverIO、WebDriverJS、Java Selenium は代わりに、マシンに既にインストールされているブラウザに接続するため、サポート対象のブラウザバイナリを自分でインストールし、テスト設定でそれを指定する必要があります。詳細は以下のセクションで説明します。

テスト用ChromeまたはChromiumのインストール

次のいずれかのインストール方法を選択してください:

• npmを使用: @puppeteer/browsers はスタンドアロンのブラウザダウンロードツールであり、プロジェクトに Puppeteer のインストールは不要です。Chrome for Testing をインストールするには、次のコマンドを実行してください：

  npx @puppeteer/browsers install chrome@stable

  代わりにChromiumをインストールするには、次を実行してください:

  npx @puppeteer/browsers install chromium@latest

  コマンドは出力の最後にインストールされたバイナリのパスを表示します。例:

  chrome@stable /home/user/.cache/puppeteer/chrome/linux-136.0.7103.92/chrome-linux64/chrome

  テストを実行する前に、そのパスに CHROME_PATH 環境変数を設定します。

  important

  @puppeteer/browsers install は現在の作業ディレクトリのサブディレクトリにブラウザをダウンロードします。大容量のダウンロードが適切な場所からコマンドを実行し、結果として得られるディレクトリを.gitignoreに追加することを考慮してください。

• GitHub Actionsを使用: 次のステップをワークフローファイルに追加してください。Chrome for Testing をインストールするには：

  - name: Setup Chrome for Testing
    uses: browser-actions/setup-chrome@latest
    id: setup-chrome
    with:
      chrome-version: stable
      install-chromedriver: true

  代わりに Chromium をインストールするには、latest をchrome-versionとして使用してください：

  - name: Setup Chromium
    uses: browser-actions/setup-chrome@latest
    id: setup-chrome
    with:
      chrome-version: latest
      install-chromedriver: true

  どちらの場合も、バイナリのパスはステップの出力から取得できます:

  ${{ steps.setup-chrome.outputs.chrome-path }}

プラットフォームの設定

CHROME_PATHが設定されたら、次のようにテスト設定を構成します。

WebdriverIO

goog:chromeOptions 内のバイナリパスを WebdriverIO の能力内で指定します。

): (wdioConfig()) の場合：

const browser = await remote(
  wdioConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    capabilities: {
      browserName: 'chrome',
      'goog:chromeOptions': {
        binary: process.env.CHROME_PATH
      }
    }
  })
)

）： (wdioTestRunner()) の場合：

export const config = wdioTestRunner({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID
  }
}, {
  capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
      binary: process.env.CHROME_PATH
    }
  }]
})

最初に

最初に webdriverConfig() を呼び出して Chrome オプションオブジェクトを取得し、それからバイナリパスを設定してブラウザを構築します：

const chromeOptions = webdriverConfig({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID
  }
})
chromeOptions.setBinaryPath(process.env.CHROME_PATH)

const browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(chromeOptions)
  .build()

にバイナリパスを設定し、

ChromeOptions でバイナリパスを設定してから watcher.configure() を呼び出します：

AxeWatcherOptions options =
    new AxeWatcherOptions()
        .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
        .setProjectId(System.getenv("PROJECT_ID"));
AxeWatcher watcher = new AxeWatcher(options);
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setBinary(System.getenv("CHROME_PATH"));
chromeOptions = watcher.configure(chromeOptions);
WebDriver wrappedDriver = watcher.wrapDriver(new ChromeDriver(chromeOptions));

Microsoft Edge を使う

Microsoft Edge は JavaScript/TypeScript および Java Playwright でサポートされており、Java Selenium ではサポートされていません。Edge が既にマシンにインストールされている場合、別のダウンロードは不要です。Chrome for Testing や Chromium の代わりに Edge を起動するようにプラットフォームを構成してください。

WebdriverIO と Microsoft Edge

WebdriverIO の能力内で browserName に MicrosoftEdge を設定します。

): (wdioConfig()) の場合：

const browser = await remote(
  wdioConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    capabilities: {
      browserName: 'MicrosoftEdge'
    }
  })
)

）： (wdioTestRunner()) の場合：

export const config = wdioTestRunner({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID
  }
}, {
  capabilities: [{
    browserName: 'MicrosoftEdge'
  }]
})

WebDriverJS と Microsoft Edge

MicrosoftEdge をターゲットブラウザとしてブラウザを構築します：

const browser = await new Builder()
  .forBrowser('MicrosoftEdge')
  .build()

Java Playwright と Microsoft Edge

Playwright はその msedge チャンネルを通じて Edge を起動するため、別のバイナリパスは必要ありません。msedge をwatcher.configure()を呼び出した後に起動オプションに設定します：

AxeWatcherOptions options =
    new AxeWatcherOptions()
        .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
        .setProjectId(System.getenv("PROJECT_ID"));
AxeWatcherPlaywright watcher = new AxeWatcherPlaywright(options);
BrowserType.LaunchPersistentContextOptions launchOptions =
    watcher.configure(new BrowserType.LaunchPersistentContextOptions().setChannel("msedge"));
launchOptions.setHeadless(false);
BrowserContext context =
    playwright.chromium().launchPersistentContext(userDataDir, launchOptions);
AxeWatcherPage page = watcher.wrapPage(context.newPage());