トラブルシューティング

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 として指定してください。そうしないと、Electronブラウザがデフォルトで使用されます。詳細については、 ブラウザの起動 に関するCypressのドキュメントを参照してください。

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

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

不完全な結果

テストスイートが複数のテストランナーを並行して使用しており、同じ非ヌルのビルド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

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

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

Axe Developer Hubは、 axe Configurationで定義された設定に従うようになりました。そして、バージョン3.18.0またはそれ以前の@axe-core/watcherで作成されたテスト実行は、axe Configurationのグローバル設定を認識していないセッションを生成します。@axe-core/watcherパッケージを更新し、テストを再実行して、企業のaxe Configurationに従ったセッションを作成してください。「 Using Global Configurations」セクションをご覧ください。

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

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 コマンドラインオプションを使用することはできません。そうしないと、テストがサイレントに失敗します。キャッシュファイルをディスクに書き込まないためにシークレットモードを使用している場合(シークレットモードではキャッシュファイルがメモリにのみ保持される)、テストスイートのキャッシングメソッドを代わりに使用してください。

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

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

ヘルプ

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