違反のスクリーンショットをキャプチャ

Axe Watcherがアクセシビリティの違反を見つけたとき、その瞬間のページのスクリーンショットをキャプチャできます。スクリーンショットはAxe Developer Hubにアップロードされ、開発中に検査するためにオプションでローカルディレクトリに保存できます。

スクリーンショットキャプチャは、すべてのJavaScriptおよびTypeScriptの統合（Playwright Test、Cypress、WebdriverIO、およびPuppeteer）と、両方のJava統合（SeleniumおよびPlaywright）で利用可能です。

スクリーンショットキャプチャを有効にする

JavaScriptまたはTypeScript:

takeScreenshots: trueをAxeConfigurationに設定します:

axe: {
  takeScreenshots: true
}

Java:

AxeWatcherOptionsに対してsetTakeScreenshots(true)を呼び出します:

AxeWatcherOptions options = new AxeWatcherOptions()
    .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
    .setProjectId(System.getenv("PROJECT_ID"))
    .setTakeScreenshots(true);

スクリーンショットをローカルに保存

スクリーンショットをローカルマシンのディレクトリに保存することもできます。これにより、Axe Developer Hubを開かずに、ローカルでテストが実行中の間に違反をレビューするのに役立ちます。

JavaScriptまたはTypeScript:

AxeConfigurationにscreenshotDirを追加します:

axe: {
  takeScreenshots: true,
  screenshotDir: './axe-screenshots'
}

Java:

AxeWatcherOptionsに対してsetScreenshotDir()を呼び出します:

AxeWatcherOptions options = new AxeWatcherOptions()
    .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
    .setProjectId(System.getenv("PROJECT_ID"))
    .setTakeScreenshots(true)
    .setScreenshotDir("./axe-screenshots");

setTakeScreenshots(true)も設定されていない限り、setScreenshotDirは効果がありません。相対パスはJVMの作業ディレクトリに対して解決されます。ディレクトリが存在しない場合、Watcherが作成します。ディレクトリ作成やファイル書き込みに失敗した場合、警告が記録され、テストスイートは継続します。

スクリーンショットは、次のファイル名パターンを使用して書き込まれます: YYYYMMDDTHHmmssSSS-{id}.png。タイムスタンプのプレフィックスは、ファイルをキャプチャ時間で並べ替え、同じテスト実行で複数のスクリーンショットが撮られる際の衝突を防ぎます。

完全なパラメータの詳細については、Java APIリファレンスのsetTakeScreenshotsおよびsetScreenshotDirを参照してください。