Seleniumテストを書く

Axe DevTools Java Selenium を使用する

このAxe DevTools構成は、いかなるアサーションライブラリにも固有の結びつきはありません。これにより、シンプルなアクセシビリティテストだけでなく、テストのカスタマイズや独自のアサーションを用いた使用も可能になります。

必要条件

Axe DevTools Java Seleniumを使用して結果を生成するには、すでにAxe DevToolsを使ってテストファイルを作成し、選択したSelenium WebDriverをインポートして初期化しておく必要があります。このステップを完了していない場合は、まずこのガイドを読んでその方法を確認してください。

スキャンを実行する

この構成では、基本的なアクセシビリティスキャンはたった3行のコードで実行できます。テストファイル内で、テストしたいページのウェブアドレスに<URL>を置き換えてください。スキャン結果はresults変数に保存されます。

webdriver.get("<URL>");
Results results = axeSelenium.run(axedriver);
webdriver.quit();

スキャン結果の利用

スキャンを実行したら、結果を活用したいと思うかもしれません。最も簡単な方法は、結果をコンソールに出力することです。

System.out.print(results);

また、結果を使ってアクセシビリティ違反をチェックすることもできます。これを行う最も簡単な方法は、次のようなステートメントを使用することです。

if (!results.violationFree()) { 
    //do something, like throw an exception
}

結果オブジェクトを活用してカスタムテストを作成する方法について詳しくは、結果を使用するのページを参照してください。

サンプルテストファイル

このテストファイルは、インポートと初期化でカバーされた同じ基本構築ブロックと、このページのテストを書くガイドに基づいています。

import com.deque.html.axedevtools.selenium.*;
import com.deque.html.axedevtools.selenium.results.*;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Example {
    public static void main(final String[] args) {
        AxeSelenium axeselenium = new AxeSelenium();
        WebDriver webdriver = new ChromeDriver();
        AxeDriver axedriver = new AxeDriver(wd);

        webdriver.get("<URL>");

        Results results = axeselenium.run(axedriver);

        webdriver.quit();

        if (!results.violationFree()) {
            int violationCount = results.getViolations().size();
            System.out.printf("Found %d violations!\n", violationCount);
            System.exit(1);
        }

        System.out.println("No violations found!");
    }
}

この例では、ChromeとChromeDriverを使用します。これを他のSeleniumブラウザドライバとブラウザに置き換えることができます。このテストファイルがアクセシビリティの問題を発見した場合、見つかった違反の数を出力し、ステータスコード1（エラー）で終了します。このテストファイルを自身の環境で使用するには、行にURLを追加する必要があります。

webdriver.get("<URL>");

追加の参考資料

基本的な使い方に加えて、Axe DevTools Java Seleniumはスキャンの実行方法を変更するためのいくつかのチェーンメソッドを提供しています。これらのメソッドは、スキャンの範囲やルールセットを任意の設定に変更可能にします。デフォルトでは、ページ全体がスキャンされ、WCAG 2.0レベルAAガイドラインに従ってアクセシビリティ違反がチェックされます。重要な注意点として、runメソッドへの後続の呼び出しは以下のチェーンメソッドの設定を上書きします。スコープまたはルールに対する変更はこれらのチェーンメソッドを使用した複数のスキャンには持続しません。

スコープ設定

デフォルトでは、ページ全体がスキャンされます。しかし、Axe DevToolsはページの特定部分をスキャンする機能をスコープチェーンメソッドでサポートしています。これらのスコープメソッドは、ページをスキャンする「対象領域」を目的の場所に効果的に変更します。さらに、違反を無視するメソッドも提供されています。この方法でページのスコープを設定することは、スキャン範囲を減少させませんが、指定された範囲内の特定の違反タイプを無視し、他の潜在的な違反については引き続き範囲をスキャンします。これらのメソッドはすべてCSSセレクター領域に基づいて機能します。各ページの指定されたCSSセレクターの領域は、ブラウザの開発者ツールの「要素を検証」ウィジェットを使用して確認できます。

スコープメソッド

前述のとおり、これらのメソッドはページをスキャンする対象領域を効果的に変更します。このカテゴリには、「包括的」メソッドと「排他的」メソッドの2つのメソッドがあります。それらは互いにチェーンして、スキャンする領域を含む複数のエンクレーブと除外を作成できます。

スコープ - 包括

包括的スコープチェーンメソッドは、指定されたCSSセレクターに渡されたページ領域内でのみスキャンを実行するように変更します。包括的メソッドを使用する方法はいくつかあります: 単一スコープ、複数スコープ、複合スコープ、およびiFrameスコープ。

このメソッドは、単一のセレクターで以下のように使用できます:

axeselenium.including("#selector1").run(axedriver);

このスキャンは、セレクター1の範囲内でのみ実行されます

複数のスコープでスキャンを設定することができます:

axeselenium.including("#selector1").including("#selector2").run(axedriver);

この呼び出しは、セレクター1およびセレクター2の範囲内でスキャンを行います。それらはカンマで区切られるか、別の包括的条件で宣言されることがあります。

複合スコープは以下の構文で達成できます:

axeselenium.including("#selector1 .selector2").run(axedriver);

この複合スコープは、セレクター2内のセレクター1を持つ要素のみがスキャンされる結果となります。これは、セレクターをカンマで区切らないことで設定されます。

iFrame内でスコープを設定するには、List<String>を渡すことができます。iFrame内でスキャンするスコープは追加のパラメーターとして渡されます。

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"})).run(axedriver);

このスキャンは、フレーム1内のセレクター1の要素で実行されます。

複数のiFrame内でスコープを設定するには、標準の複数選択と同じ方法で行います。includingを再度呼び出します。

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"}))
    .including(Arrays.asList(new String[] {"#frame2", "#selector2"})).run(axedriver);

このスキャンは、フレーム1内のセレクター1と、フレーム2内のセレクター2の中のみで実行されます。

ネストされたiFrame内でスコープを設定することも可能です:

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#frame2", "#selector1"})).run(axedriver);

このスキャンは、フレーム2内のセレクター1の範囲内で実行され、さらにそれはフレーム1内にあります。

スコープ - 排除

包括的チェーンメソッドに加えて、このAPIには排他的メソッドがあります。このメソッドでは、指定されたスコープの外側にある要素のみをスキャンするように変更されます。その設定と使用法は包括的メソッドと同一なので、詳しくは上記セクションを参照し、使用方法の詳細と例を確認してください。覚えておくべき重要な詳細は、包括的メソッドと排除メソッドは互いにチェーンして使用し、追加の複雑なスコープをはるかに簡単に作成できるということです。

この例は、内部と排除の方法を組み合わせた方法の一つを示しています:

axeselenium.including("#selector1").excluding("#selector2").run(axedriver);

このスキャンは、セレクター1の内側でセレクター2の内側ではないページの部分のみで実行されます。

スコープ - 違反の無視

スコープに関連する最後のチェーンメソッドは、結果の無視方法です。この方法は、スキャンの全体的な範囲を変更することはありませんが、指定された範囲内で特定のタイプの違反を無視します。無視したい要素のセレクターと、その要素が違反しているルールを組にして配列として渡すことで機能します。

axeselenium.ignoring("[\".sidebar\", \"#branded-content\"]", "color-contrast").run(axedriver);

このスキャンは、サイドバーセクションとブランドコンテンツセクション内のカラコントラスト違反を無視します。

ルール

各スキャンに対するルール設定を変更するための3つの方法があります。これらの異なる方法は、テストするルールを選択する際に異なるきめ細かさを可能にします。最もきめの粗いルールセットメソッドは、共通のアクセシビリティ基準に基づくルールセットまたは大規模なルールグループを選択します。若干きめ細かいルールセット基準メソッド（タグとも呼ばれます）は、より大きなアクセシビリティ基準のどのエリアに属するかに基づいてルールを選択します。最後に、1つのルールを設定するための3つのオプションがあります。これらのチェーンメソッドをすべて合わせることで、実行したいルールを正確に設定することができます。

axe-coreルールに関する情報は、ルールセット概要ページをご覧ください。

ルールセットの選択

このメソッドは、ルールセットという最も集約された関連付けによってルールを選択します。ルールセットとは、業界全体のアクセシビリティ標準に関するすべてのルールの集まりです。WCAG 2.0、2.1、および2.2のルールセット、ADAセクション508、Trusted Tester v5、EN 301 549、RGAA。さらに、最良の実践ルールはブール値のフラグで有効にすることができます。

ルールセットはしばしば、より具体的な区分でまとめられたルールの複数のタグで構成されます。例えば、wcag2ルールセットには、wcag2aWCAG 2.0レベルAルール、wcag2aaWCAG 2.0レベルAAルール、wcag2aaaWCAG 2.0レベルAAAルールがタグ付けされたすべてのルールが含まれています。

ルールセットを修正せずに選択したい場合、このオプションを使用します。

axeselenium.forRuleset("wcag2.1").run(axedriver);

このスキャンはWCAG 2.1ルールのみで実行されます。

最良の実践ルールを有効にするには、forRulesetの第2の形式を使用します。

axeselenium.forRuleset("wcag2.1", true).run(axedriver);

標準選択

アクセシビリティ標準、またはタグ、チェインメソッドは、axe-coreのルールセット内で若干の細分化を可能にします。WCAGに基づくルールで、このメソッドはシングルAまたはダブルAにタグ付けされたルールのみを選択することができます。このリストは、利用可能なタグ名とそれに対応する標準を示しています。

このオプションは、特定の部分のルールセットのみをテストしたい場合、例えばWCAG 2.0の下のシングルAルールのみの場合に特に有用です。

特定のアクセシビリティ標準の一部として明示的に定義されてはいませんが、私たちは「ベストプラクティス」と呼ばれるいくつかのルールを提供しています。厳密には必要ありませんが、これらのルールでテストすることで、あなたのウェブサイトは利用可能な限り均等になります。

1つの標準を選択するには、次のようにします：

axeselenium.accordingTo("wcag2a").run(axedriver);

このスキャンは、WCAG 2.0レベルAにタグ付けされたルールのみで実行されます。

さらに、複数のタグを指定して、複数のアクセシビリティ標準を選択できます：

axeselenium.accordingTo("wcag2a", "section508").run(axedriver);

これらのスキャンは、WCAG 2.0レベルAおよびADAセクション508にタグ付けされたルールの両方を実行します。

ルール選択

最後に、個別のルールによってルールセットを変更することができます。axe-coreのすべてのルールの名前と各ルールが何をテストしているかについての情報は、axe-coreのルール記述ドキュメントを参照してください。

これらのメソッドは、目的の最終的なルール群が、既存のルールセットまたは標準/タグと数個の個別ルールのみによって異なる場合に適しています。完全にカスタマイズされたルールセットを構築するには、カスタムルールオプションをご覧ください。

追加ルールのチェック

チェックチェインメソッドを使用すると、標準のルールセットに加えてテストする追加ルールを追加できます。

このメソッドは、単一の追加ルールをチェックするために使用できます：

axeselenium.checking("label").run(axedriver);

スキャンがデフォルトのルールセットに加えて「label」ルールで実行される場合。

また、次の2つの方法で複数の追加ルールをチェックするためにも使用できます。

axeselenium.checking("label", "tabindex").run(axedriver);
axeselenium.checking("label").checking("tabindex").run(axedriver);

スキャンがデフォルトのルールセットに加えて「label」および「tabindex」ルールで実行される場合。

指定されたタグに単一または複数のルールを追加するためにも使用できます。

axeselenium.accordingTo("wcag2a").checking("tabindex").run(axedriver);

スキャンがWCAG 2.0レベルAのルールに対して実行され、「tabindex」ルールが追加される場合。

ルールのスキップ

チェック方法と同様に、スキップ方法は指定されたルールによって使用されるデフォルトルールを変更します。しかし、ルールセットに追加する代わりに、スキップ方法はテストに使用されるルールから指定されたルールを削除します。その設定と使用法はチェック方法と同じなので、上記のセクションで使用方法についての詳細と例をご参照ください。覚えておくべき重要な点は、チェック方法とスキップ方法を組み合わせて使用することで、無視またはチェック方法のみを使用するよりもはるかに簡単にカスタマイズされたルールセットを作成できるということです。

axeselenium.accordingTo("wcag2a").checking("tabindex").skipping("label").run(axedriver);

この例は、WCAG 2.0レベルAのルールに基づいてテストするスキャンを示しており、「tabindex」ルールの追加と「label」ルールの削除が行われています。

チェックのみ

チェックのみの方法は、指定されたルールのみをチェックします。明示的に指定されていないルールはスキャンに含まれません。

この連鎖方法は単一のルールを指定するために使用できます。

axeselenium.checkingOnly("tabindex").run(axedriver);

スキャンが「tabindex」ルールのみで実行される場合。

また、次の2つの方法で複数のルールを指定するために使用できます。

axeselenium.checkingOnly("label", "tabindex").run(axedriver);
axeselenium.checkingOnly("label").checkingOnly("tabindex").run(axedriver);

スキャンが「label」および「tabindex」ルールのみで実行される場合。

iframeテストの無効化

不安定なページでは、iframeが問題を引き起こす可能性があります。Axeは各フレームに注入され、同じ方法で設定される必要があります。AxeSelenium::runがページをテストしている間にiframeが追加または削除されると、例外が発生したり予期しない動作が起こる可能性があります。セーフティとして、AxeSeleniumはすべてのiframeの操作を無効にする方法をAxeSelenium::disableIframeTestingで提供しています。有効にすると、axe-coreはページ内のiframeに注入されず、これらのiframeで実行されることもありません。トップレベルのページのみがチェックされます。

このように使用できます。

axeselenium.disableIframeTesting().run(axedriver);

使用サービス

組織内のAxe DevToolsの使用傾向について洞察を得る

使用サービスは環境変数を通じて、またはランタイムでのメソッドを通じて設定することができます。両方を使用した場合、メソッドの値が使用されます。注意：すべての使用サービスのデータフィールドがメソッドを通じて設定できるわけではありません。

デフォルトでは使用サービスが有効で、結果はhttps://usage.deque.comに送信されます。それを無効にするには、環境変数AXE_TRACK_USAGEをfalseに設定します。使用イベントがDequeに届かない場合は、環境変数AXE_METRICS_URLを明示的に設定してください。

環境変数

これらの環境変数により、使用サービスを構成し、報告されるイベントのプロパティを変更することができます。

トラッキングの有効化

この方法により、ユーザーは使用サービスへのデータ送信を選択できるようになります。送信はデフォルトで有効です。

.enableTracking(boolean state)

トラッキングURLの設定

この方法により、使用メトリクスデータが送信される場所を変更できます。デフォルトはhttps://usage.deque.comです。

.setTrackingUrl(String url)

一意のIDの設定

この方法により、保存/使用される一意のIDを変更できます。

.setDistinctId(String distinctId)

次のステップ

Axe DevToolsでテストを作成し始めたら、より詳細でカスタムなテストを書くために結果を使用するを読み、またはアクセシビリティスキャンのレポートを生成するためにレポーターを使用するを読むことができます。

トラブルシューティング

アクセシビリティテストの設定で問題が発生した場合は、Dequeの担当者に直接連絡するか、私たちのサポートデスク、またはメールを送るでご連絡ください。アクセシビリティテストの取り組みをサポートすることを喜んでいます。