トラブルシューティング

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は次のみをサポートします テスト用Chrome または Chromium

axe Developer Hubウェブサイトは複数のブラウザをサポートしていますが、Watcherパッケージは テスト用Google Chrome またはChromiumのみをサポートします。発生する可能性のある問題:

  • Chromeバージョン139以降を使用すると、Watcherからエラーを受け取ります。代わりにテスト用ChromeまたはChromiumを使用してください。
  • CypressのElectronブラウザを使用すると、エラーが発生します。ブラウザを テスト用Chrome または Chromium と指定してCypressを起動してください。そうでないと、Electronブラウザがデフォルトで使用されます。詳しくは ブラウザの起動 のCypressドキュメントをご覧ください。

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

結果が不完全

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

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

通常、ビルドIDは次の中に設定します AxeConfiguration

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

アクセシビリティエラーの重複または新しい問題のカウントに誤り

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

axe: {
  runOptions: {
    ancestry: true
  }
}

動的セレクタの使用ガイドについては、 動的セレクタの使用 を参照してください。

詳細情報はJavaScript/TypeScriptの runOptions またはJavaの AxeWatcherOptions.setRunOptions() を参照してください。

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

もし@axe-core/watcherのバージョン3.18.0以前のものを使用している場合、次の警告メッセージを受け取ります:

グローバル構成をサポートするには古すぎる@axe-core/watcherパッケージが原因で発生するメッセージを示すスクリーンショット

Axe Developer Hubは、 axe Configurationで定義された設定に今従い、@axe-core/watcherバージョン3.18.0以前によって作成されたテスト実行は、axe Configurationのグローバル設定を認識していないセッションを生成します。@axe-core/watcherパッケージを更新して、テストを再実行し、企業のaxe Configurationに従ったセッションを作成する必要があります。詳しくは、 グローバル構成の使用をご覧ください。

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

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

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

タイムアウトの使用について詳しくは、 タイムアウトの設定 を参照してください。

詳細情報については、 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のサーバーに送信するために、 flush() 関数(またはCypressのカスタムコマンド axeWatcherFlush() )を呼び出し、結果をaxe Developer Hubウェブサイトに表示できるようにします。通常、 flush() 関数を自動化プラットフォームのクリーンアップフックで呼び出します。

例えば、Cypressのsupport/e2e.jsファイルに次のように呼び出しを追加します: afterEach()

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

--incognitoオプションを使用する

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

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

GitHub の 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
...

ヘルプ

問題が解決できない場合は、どうぞご遠慮なく メールをお送りください 。私たちがお手伝いします。