Cucumber JavaScript
JavaScript、Axe DevTools、Cucumberを使用したテスト
前提条件
CucumberとAxe DevToolsを使用してコンテンツをテストするためには、まずそれをプロジェクトにインポートして初期化する必要があります。
このステップをまだ完了していない場合、Cucumberのセットアップに以下のいずれかを選択してください。
CucumberとAxe DevTools
Cucumberと連携する実装を選択したら、ページレベルのコンテンツまたは特定のコンポーネントをテストするために各機能で使用できる再利用可能なステップを作成することができます。
このドキュメントではWebDriverJS統合との使用を示していますが、WebdriverIOおよびPuppeteerとの組み合わせでも同様に機能します。
ページスキャンステップの作成
アクセシビリティの問題を確認するためにページ全体をスキャンするCucumberステップを作成するには、ページ名を文字列で受け取るその後関数を作成します。次に、そのステップ内で、お好みのAxe DevToolsドライバーの新しいインスタンスを作成し、分析します()を呼び出します。
スキャンの結果は、Axe DevToolsリポーターパッケージと共に使用され、すべてのレポート機能に使用することができます。Axe DevToolsのレポートに関する詳細はAxe DevTools JSON結果からのレポートの生成をご覧ください。
次の例は、その後関数の使用法を示しています。
Then('I check if {string} is axe clean', async pageName => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});次の例は、アクセシビリティをテストするためのその後ステップを持つCucumberシナリオを示しています。
Feature: abcdTech search
As a user, I want to search for computers on abcdTech.
Scenario: Searching for computers
Given I am on the abcdTech homepage
Then I audit "homepage" for accessibility issues
When I search for "computers"
Then I see the page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I check if "searchPage" is axe clean
コンポーネントスキャンステップの作成
ページの一部またはコンポーネントのみをアクセシビリティの問題のためにスキャンするCucumberステップを作成するには、コンポーネント名を受け取る文字列とcss選択子のもう一つの文字列を受け取るその後関数を作成します。次に、そのステップ内で、お好みのAxe DevToolsドライバーの新しいインスタンスを作成し、分析します()を呼び出します。
スキャンの結果は、Axe DevToolsリポーターパッケージと共に使用され、すべてのレポート機能に使用することができます。Axe DevToolsのレポートに関する詳細はAxe DevTools JSON結果からのレポートの生成をご覧ください。
次の例では、その後を使用してページの一部をスキャンする方法を示しています。
Then('I check if {string} is axe clean with selector {string}', async (pageName, selector) => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.include(selector).analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});この例では、ページの一部のみをスキャンするシナリオでその後ステップを使用する方法を示しています。
Feature: abcdTech cart flow
As a user, I want to find a computer and add it to cart
Scenario: Selecting a new computer and adding to cart
Given I am on the abcdTech laptops page
Then I audit "laptops" for accessibility issues
When I click on more details
Then I see the proper page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I audit "mainContent" for accessibility issues with selector "#container"
アクセシビリティスキャンを正常に完了したので、レポートの生成や結果オブジェクトの使用のようなより高度なスキャンのトピックに進む準備ができています。
トラブルシューティング
スキャン結果の取得に問題がある場合、お手持ちのDeque担当者に直接ご連絡いただくか、私たちのサポートデスクまたはメールを送るでお知らせください。喜んでお手伝いします。
Axe DevTools全般に関する詳細は、Axe DevToolsウェルカムページをご覧ください。