Cucumberテストを書く

Axe DevToolsを用いたCucumberの使用

前提条件

アクセシビリティテストを書いて結果を生成するには、Axe DevToolsでテストファイルを作成し、選択したSelenium WebDriverを事前にインポートおよび初期化しておく必要があります。まだこれを行っていない場合は、このガイドを読んで方法を確認してください。

設定

まず最初に、Axe DevToolsを設定に追加します

public class AppConfiguration {

    @Bean
    public static AxeWorld axeWorld() {
        return new AxeWorld();
    }
}

次に、Axe DevToolsを使用するための必要なステップを追加します

public class StepDefinitions {

    private AxeWorld axeWorld;

    public StepDefinitions(AxeWorld axeWorld) {
        this.axeWorld = axeWorld;
    }

    private WebDriver webDriver;

    @Before
    public void setup() throws IOException {
        webDriver = new ChromeDriver();
        axeWorld.setPage(new AxeDriver(webDriver));
    }

    @After
    public void tearDown() throws Exception {
        webDriver.quit();
    }

    @When("^I visit \"([^\"]*)\"$")
    public void iVisit(String url) throws Throwable {
        webDriver.get(url);

    }
}

テストの作成

ページをテストする前に、まずアクセスする必要があります。最初のステップは、Selenium WebDriverをインスタンス化してページにアクセスすることです

WebDriver webDriver = new ChromeDriver();
webDriver.get("'https://broken-workshop.dequelabs.com'");

次に、Axe DevToolsのスキャンドライバオブジェクトを作成し、WebDriverを渡します

AxeDriver axeDriver = new AxeDriver(webDriver);

最後に、ステップ定義にaxeDriverを含めます

// Inject AxeWorld into your step definitions.
public StepDefinitions(AxeWorld axeWorld) {
  this.axeWorld = axeWorld;
}
// Provide the page to the Axe World
axeWorld.setPage(new axeDriver(webDriver));

その後、ページのアクセシビリティをテストできます。現在、Axe DevToolsはCucumberを通じてPicoとSpringのテストをサポートしています。

使用方法

アクセシビリティCucumberステップ

The example accessibility checks below use Then the page should be axe clean, but all checks work interchangeably with Then the page should be audited for accessibility. The difference between these two is whether testing will fail on accessibility violations with Then the page should be axe clean, versus not fail with Then the page should be audited for accessibility.

axeのアクセシビリティCucumberステップを構築するには、基本ステップから始め、必要な句を追加します。以下の句はすべて組み合わせて使用できますが、指定された順序でなければなりません。

Then the page should be axe clean [including] [excluding] [according-to] [checking-rules/checking-only-rules] [skipping-rules]

基本ステップ

基本ステップはCucumberステップの核心部分です。単体で完結しており、現在ロードされているページがアクセシブルであることを確認します。ページのアクセシビリティについて監査を行います。監査はアクセシビリティの問題をtarget/axe-report/accessibility-check.logに記録し、結果のJSON出力をtarget/axe-report/accessibility-check.jsonに作成します。

Then the page should be axe clean

This step will cause test suite failures if accessibility violations are found

Then the page should be audited for accessibility

This step will require handling of violations outside of test suite failures, as this step does not trigger the suite to fail if violations are found.

スコープ設定

Axe DevToolsでは、アクセシビリティスキャンを包括的および排他的に設定できます。さらに、これらのスコープは相互に作用して、複雑なスコープのエンクレーブとエクスクレーブを作成できます。これらのスコープはCSSセレクタを基に動作します。

包含句

包含句within "#selector"はページ上でチェックする要素を指定します。選択されたスコープ内の要素のみがスキャンされます。包含句にはダブルクォートで囲まれた有効なCSSセレクタを含める必要があります。複合セレクタを使用して複数の要素を選択します。例：within "#header, .footer"

Then the page should be axe clean within "#selector"

排除句

排除句excluding "#selector"は無視する要素を指定します。選択されたスコープ内の要素はスキャンされません。排除句にはダブルクォートで囲まれた有効なCSSセレクタを含める必要があります。複合セレクタを使用して複数の要素を選択します。例：excluding "#widget, .ad"

Then the page should be axe clean excluding "#selector"

包含および排除の連鎖

包含句と排除句を連鎖させるには、セミコロン（;）または単語「しかし」を使用してそれらを分けます。

Then the page should be axe clean within "main"; excluding "aside"
Then the page should be axe clean within "main" but excluding "aside"

ルール設定

Cucumber APIを使用することで、標準のルール設定を変更する方法は何通りかあります。タグを使用してグループごとにルールを選択したり、ルールIDごとにルールを個別に選択したりできます。

ルールタグ句

タグ句はページチェックで使用するアクセシビリティ標準（または標準群）を指定します。アクセシビリティ標準を名前（タグ）で指定します。複数の標準を指定する場合はカンマで区切ります。例：according to: wcag2a, section508

すべてのタグ名は文書化されていますに加えて、各タグに対応するルールの説明の完全なリスト

Then the page should be axe clean according to: best-practice

追加ルール確認句

この句を使うことで、既存のルールに追加のルールを付け加えることができます。ルールIDによって単一のルールを指定するか、カンマで区切ってルールのリストを指定します。ルールとそのルールIDのリストについてはルールの文書を参照してください。セミコロン（;）または単語andを使用して、前の句からチェックルール句を分離します。

Then the page should be axe clean checking: color-contrast

Then the page should be axe clean according to: wcag2a; checking: color-contrast
Then the page should be axe clean according to: wcag2a and checking: color-contrast

特定のルールのみの確認句

チェックルール句に単語onlyを追加することで、ステップの意味を変えることができます。前述の通り、チェックルール句は実行する追加ルールを指定します。単語onlyを使用する場合は、指定されたルールのみがチェックされます。ルールとそのルールIDのリストについてはルールの文書を参照してください。セミコロン（;）または単語andを使用して、前の句からチェックルール句を分離します。

Then the page should be axe clean checking only: color-contrast

ルールスキッピング句

ルールスキッピング句は、既存のルール設定からスキップするルールを指定します。スキップするルールはカンマで区切られたルールIDで指定されます。ルールとそのルールIDのリストについてはルールの文書を参照してください。セミコロン（;）または単語andを使用して、前の句からチェックルール句を分離します。

Then the page should be axe clean skipping: color-contrast

Then the page should be axe clean according to: wcag2a; skipping: color-contrast
Then the page should be axe clean according to: wcag2a but skipping: color-contrast

ルールセット選択句

Cucumber句を通してaxeDriver内のタグ付けされたルールセットにアクセスします。この機能を使用すると、ページのアクセシビリティを監査するためのルールセット (例: 508, wcag2, wcag2.1) を指定できます。

Then the page should be axe clean according to ruleset: wcag2.1

使用量サービス

組織内でのAxe DevToolsの使用トレンドについての洞察を得る

デフォルトでは使用量サービスは無効化されており、デフォルトのURLはhttps://usage.deque.comです。

環境変数

これらの環境変数を使用すると、使用サービスの設定や報告イベントのプロパティを変更できます。

次のステップ

Axe DevTools のスキャン結果をさらに活用するには、レポート作成などのAxe DevTools Java Selenium パッケージドキュメントを参照してください。

トラブルシューティング

アクセシビリティテストの設定に関して問題が発生した場合は、直接 Deque 担当者に連絡するか、サポートデスク、またはメールでのお問い合わせでお問い合わせください。お客様のアクセシビリティテストをスムーズに始めるお手伝いをいたします。