トラブルシューティング

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

Axe Watcherの一般的な問題と解決策

Not for use with personal data

Watcher は テスト用ChromeChromium、または Microsoft Edge のみをサポートします

Axe Developer Hubのウェブサイトは複数のブラウザーをサポートしていますが、Watcherパッケージはテスト用Google Chrome、Chromium、またはMicrosoft Edge(JavaScript/TypeScriptまたはJavaでPlaywrightを使用)でのみサポートされています。予期される問題:

  • Chromeバージョン139以降を使用すると、Watcherからエラーが発生します。代わりにChrome for TestingまたはChromiumを使用してください(JavaScript/TypeScriptまたはJavaでPlaywrightを使用する場合はMicrosoft Edgeも使用できます)。
  • CypressのElectronブラウザーを使用すると、エラーが発生します。Cypressを起動する際にブラウザーをテスト用ChromeChromium、またはMicrosoft Edgeに指定してください。そうしないと、デフォルトでElectronブラウザーが使用されます。詳細はCypressのドキュメントのブラウザの起動をご覧ください。

WebdriverIOまたはWebDriverJSを使用する場合、テストセットアップを明示的にChrome for TestingやMicrosoft Edgeを使用するように設定する必要があります。Java Seleniumを使用する場合、テストセットアップを明示的にChrome for Testingを使用するように設定する必要があります。インストール手順とプラットフォーム固有の設定例についてはテスト用Chromeの使用をご覧ください。

Watcherでサポートされるソフトウェアの詳細については自動テストプラットフォームをご覧ください。

不完全な結果

テストスイートが複数のテストランナーを並行して使用しており、同じ非ヌルのビルドIDを使用している場合、テストランナーごとの結果が同じGitコミットSHAの他のテストランナーの結果を上書きし、不完全な結果になります。各テストランナーが同じ非ヌルのビルドIDを使用するようにする必要があります。

important
  • JavaScript/TypeScript: buildID(大文字D
  • Java: buildId(小文字d

通常、ビルドIDはAxeConfigurationで設定します。

異なるCI/CDプラットフォームで並列テストランナーを使用する方法の詳細についてはテストの並行実行をご覧ください。

重複したアクセシビリティエラーまたは新しい問題の数が間違っている

ウェブサイトが動的IDやクラス名を使用し、ページがリフレッシュされるたびに変更される場合、特に以前のテスト実行で同じ要素で同じ問題が発生した場合、新しいとしてマークされた問題を含むアクセシビリティエラーの重複が見られる可能性があります。(Axe Developer Hubは、テスト実行間で同じ要素を特定するためにIDやクラスを使用しています。)この問題を解決するには、設定のrunOptionsオブジェクトのancestryプロパティをtrueに設定する必要があります。以下の例は、設定でオプションを設定する方法を示しています。

axe: {
  runOptions: {
    ancestry: true
  }
}

動的セレクターの使用に関する詳細なガイダンスについてはに関するガイダンスについては、をご覧ください。

詳細については(JavaScript/TypeScript)runOptionsまたは(Java)AxeWatcherOptions.setRunOptions()をご覧ください。

旧バージョンの@axe-core/watcher

バージョン3.18.0またはそれ以前の@axe-core/watcherを使用している場合、次の警告メッセージが表示されます:

@axe-core/watcherパッケージが古すぎてグローバル設定をサポートできない場合に表示されるメッセージのスクリーンショット

Axe Developer Hubは現在Axe設定で定義された設定に従っています。バージョン3.18.0以前の@axe-core/watcherが生成するテスト走行は、Axe設定のグローバル設定を認識せずにセッションを生成します。@axe-core/watcherパッケージを更新して、エンタープライズのAxe設定に従ったセッションを作成するためにテストを再実行してください。詳しくはUsing Global Configurationsをご覧ください。

子フレームに切り替えた後のページ状態はキャプチャされません

テストでswitchToFrame()(WebdriverIOまたはWebDriverJS)やswitchTo().frame()(Java Selenium)を使用してブラウザーの現在のコンテキストを子フレームに切り替えた場合、Axe Watcherはブラウザーが子フレームにフォーカスしている間に行われたアクションのページ状態をキャプチャしません。Axe Watcherはトップレベルのフレームしか分析できません。

例えば、WebdriverIOでは、以下のclick()呼び出しはページ状態を生成しません:

await browser.url('https://example.com')
const iframe = await browser.$('iframe')
await browser.switchToFrame(iframe)
// Actions taken in the child frame will not be analyzed
await button.click()

ページ状態のキャプチャを再開するには、先にトップレベルのフレームに切り替えてから続行してください。

// WebdriverIO
await browser.switchToParentFrame()

// WebDriverJS / Java Selenium
await driver.switchTo().defaultContent()
note

Cypress はこの制限の影響を受けません。

cy.screenshot()によって生成される余分なページ状態

Cypressテストでcy.screenshot()を呼び出すと、Axe Watcherが余分なページ状態を生成することがあります。Cypressがスクリーンショットを撮る際に、アニメーションを無効にするために一時的にDOMを変更し、Axe WatcherのDOMオブザーバーがその変更をページ状態の変更として検出する場合があるためです。これは想定された動作であり、アクセシビリティ結果の精度には影響しません。

コントローラーメソッドのタイムアウト

important

Java Watcherは現在、タイムアウト値の変更を許可していません。

(JavaScriptまたはTypeScriptのみ)コントローラーメソッドController抽象基底クラスで定義されたanalyze()、flush()、start()、およびstop())またはCypressのカスタムコマンドの呼び出しがタイムアウトした場合、次のようなメッセージを受け取ります。

Error: Watcher could not send results to the server. To resolve this problem, adjust your `timeout.flush` property within your configuration or see https://docs.deque.com/developer-hub/wa-troubleshooting for more troubleshooting.

指定されたControllerメソッド(ここではflush()メソッド)がデフォルトの時間以上を必要とし、タイムアウトしました。デフォルトの時間はtimeoutオブジェクトを設定に追加して変更できます。

axe: {
  timeout: {
    flush: 10000
  }
}
important

これらのタイムアウト値は、使用しているテストフレームワークとは独立しており、そのフレームワークのタイムアウト値も増やす必要があるかもしれません。

タイムアウトの使用に関する情報についてはSet Timeoutsをご覧ください。

詳細はTimeoutsインターフェースおよびtimeoutsをご覧ください。デフォルトのタイムアウト値は、Timeoutsインターフェースの下の表に示されています。

結果が表示されない

テストスイートを実行しても、特定のプロジェクトに対する結果がAxe Developer Hubに表示されない場合、その原因は以下のセクションに示された理由にあります。

Axe Watcherを設定していない

修正したテストスイートは、テストを実行する前にテストフレームワークに適した設定関数を呼び出す必要があります。Axe Watcherを正しく設定しないと、Axe Watcherを設定する必要があるというメッセージが表示されます。例えば、CypressでAxe Watcherの設定を忘れると、テストスイートを実行した際にこのメッセージが表示されます。

Cypress is not configured for axe Watcher. Please ensure that axe Watcher's cypressConfig() is invoked within Cypress's defineConfig() in your cypress.config.js. All tests will fail with this error.

設定の手順で、言語およびブラウザーテストフレームワークの設定例を参照してください。

結果をフラッシュしない

収集された結果をDequeのサーバーに送信して、Axe Developer Hubウェブサイトで結果を表示できるようにするには、対応するflush()機能(またはCypressでのカスタムコマンドaxeWatcherFlush())を呼び出す必要があります。通常、flush()機能を自動化プラットフォームのクリーンアップフックで呼び出します。

例えば、Cypressのsupport/e2e.jsファイルでは、afterEach()の呼び出しを追加します。

// Flush axe-watcher results after each test.
afterEach(() => {
  cy.axeWatcherFlush()
})

--incognito オプションの使用

Chromeで--incognitoコマンドラインオプションを使用することはできません。そうしないと、テストが静かに失敗します。インコグニートモードを使用してキャッシュファイルをディスクに書き込まないようにする場合(キャッシュファイルはインコグニートモードでのみメモリに保持されます)、テストスイートのキャッシングメソッドを使用してください。

必要な環境変数を設定していない

watcher-examples リポジトリのサンプルを試している場合、サンプルはAPIキーとプロジェクトIDを設定するために環境変数を使用していることに注意してください。API_KEYPROJECT_ID

テストが早すぎる

テストが早すぎて、Watcherが分析する前にページをアンロードし、リソースを解放することがあります。この問題を修正するには、テストの最後に遅延を追加してページを分析する時間を確保してください。

例えばCypressでは、cy.wait()メソッドを使って10秒の遅延(10,000ミリ秒)を追加できます。

describe('Visitor', () => {
  it('should visit example.com', () => {
    cy.visit('https://www.example.com')
    cy.wait(10000);  })
})

APIキーの欠落または無効

無効または欠落したAPIキーは、Cypressで無効な設定ファイルとして表示されます。スタックトレースはそれが無効か欠落しているかを明らかにします。欠落しているキーは次のように表示されます。

AssertionError [ERR_ASSERTION]: API key is required
    at validateApiKey ...

(スタックトレースの多くの行は省略されました。)

キーは次のスタックトレースの結果になります(短縮版): キーは次のようなスタックトレースを生成します(短縮版):

Error: Server responded to https://axe.deque.com/api/api-keys/test/validate/axe-devtools-watcher with status code 404:
{"error":"Invalid API key"}
    at Response.getBody
...

ヘルプ

問題を解決できない場合は、メールでご連絡までご連絡ください。