ページ分析の制御

通常、axe Developer Hubは、テストスイートが訪問する各ページを自動的に分析します（ 自動モードとして知られています）。時々、この自動分析により、不要なページまで分析されたり、関心のないページ、または組織内の他の部署に属するページが分析されたりすることがあります。自動モードを無効にすることで、各ページをいつ（または分析するかどうか）分析するかを決定することができます（ 手動モードとして知られています）。

シナリオ

ウェブサイトの一部をスキャンする

手動モードを使用すると、ウェブサイトの一部のみをスキャンできます。たとえば、チームがサイトのショッピングカート機能を担当している場合、テストスイートが商品をカートに追加するためにカタログページを訪問する必要があるとしても、カタログページのアクセシビリティテストは避けたいでしょう。テストスイートでショッピングカートページに到達したら、自動分析を再有効化できます。その後、ショッピングカートのテストが完了したら、自動分析を再度無効にすることができます。

次のステップ

• 設定で自動分析を無効にする ことで、カタログページのテストを避けられます。
• 自動分析を有効にする ことで、ショッピングカートページの自動アクセシビリティテストを継続できます。
• コールによる自動分析の無効化 をショッピングカートページのテスト終了時に行い、ショッピングカートページ後に訪問するページのテストを防ぎます。

動的コンテンツの読み込み

手動モードを使用して、複雑な読み込みシーケンスを持つページのテストを回避できます。テストしたいページがバックグラウンドで多くのリソースを動的に読み込む場合、完全に読み込まれるまで自動モードをオフにすることができます。これにより、ページが完全に読み込まれた後にのみ存在するアクセシビリティの問題に限定されます。また、読み込みアニメーションや他の読み込みUI中のアクセシビリティチェックを防ぎます。

次のステップ

• 設定で自動分析を無効にする ことで、読み込みアニメーションやUIがアクセシビリティエラーのテストをされなくなります。
• 自動分析を有効にする ことで、ページが完全に読み込まれた後に自動アクセシビリティテストを再開できます。

特定のページ状態のキャプチャ

特定の ページ状態 をスキャンしたい場合、ページをセットアップした後に手動でアクセシビリティ分析をトリガーすることができます。

次のステップ

• 設定で自動分析を無効にする ことで、必要な状態になる前にアクセシビリティ分析が実行されるのを防ぎます。
• ページを手動で分析する ことで、関心のある特定のページ状態をテストできます。

大きなテストスイートの範囲制限

自動分析を無効にすることで、大規模で包括的なテストスイートを使用しつつ、アクセシビリティテストをその一部に制限することができます。この場合、より大きなテストスイートを小さなテストスイートに分割する必要はなく、関心のあるテストスイートでのみアクセシビリティをテストできます。

次のステップ

• 設定で自動分析を無効にする ことで、テストスイートの開始時に自動アクセシビリティ分析を開始しないようにします。
• 自動分析を有効にする ことで、テストしたいテストスイートの部分に到達した時にテストを行います。
• コールによる自動分析の無効化 を行い、アクセシビリティエラーをテストしたくないテストスイートの部分の診断を無効にできます。

手動モードの使用方法

設定内で自動分析を無効にすることができます（詳細は 設定で自動分析を無効にする を参照してください）。

ページ分析は コントローラー オブジェクトまたはCypressの同等のコマンドで3つのメソッドによって制御されます。

1. 分析する() (Cypressでは: cy.axeWatcherAnalyze()) を使用して現在のページを分析します。
2. start() (Cypressでは: cy.axeWatcherStart()) を使用して自動アクセシビリティ分析を有効にします。
3. stop() (Cypressでは: cy.axeWatcherStop()) を使用して自動アクセシビリティ分析を無効にします。

コントローラーオブジェクトの取得

(JavaScript/TypeScript) コントローラーオブジェクトを取得する方法の情報については、 Controller オブジェクトについては、テストフレームワークの手順ページの ステップ4 を参照してください：

JavaScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

(Java) Javaの場合は、テストフレームワークの手順ページの ステップ3 を参照してください。 ステップ4 では、 wrappedDriver をキャストして、 flush() メソッドを呼び出す方法を示します：

• Selenium

Cypress

(JavaScript/TypeScript) Cypressの場合、グローバルな cy オブジェクトとこれらの等価なコマンドを使用できます：

Playwrightテスト

（JavaScript/TypeScript）Playwrightテストの場合、 コントローラー オブジェクト（PlaywrightController）は、 ページから取得できます。このオブジェクトには、 axeWatcher オブジェクトが含まれています。この axeWatcher オブジェクトを使用して、 コントローラー メソッドを呼び出すことができます（以下の例はTypeScriptです）。

import { test, expect } from './fixtures'

test('example test', async ({ page }) => {
  await page.goto('https://example.com')
  await page.axeWatcher.analyze()
})

設定での自動分析の無効化

自動アクセシビリティテストを無効化するには、

• （JavaScript/TypeScript） autoAnalyze プロパティを axe設定オブジェクト で設定します。 false
• （Java） setAutoAnalyze() メソッドを呼び出します。 false

（JavaScript/TypeScript）例えば、 autoAnalyze を False に設定します（以下のCypress JavaScriptサンプルで強調表示されています）。

const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher/cypress/config');

const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,      projectId: PROJECT_ID,
      autoAnalyze: false
    },
    // Your existing Cypress configuration code here
  })
);

呼び出しによる自動分析の無効化

Cypressでは、 axeWatcherStop()コマンドを使用できます：

cy.axeWatcherStop()

（JavaScript/TypeScript）他のテスト統合では、 stop()メソッドをコントローラーオブジェクトで使用します。

await controller.stop()

（Java）Java Watcher統合では、 AxeWatcherController.stop() メソッド。

「 コントローラーオブジェクトの取得 」を参照してください。テストフレームワーク用のコントローラーオブジェクトを取得する方法についての詳細が記載されています。

ページを手動で解析する

自動解析を無効にした後、(JavaScript/TypeScript) axeWatcherAnalyze() を（Cypress用として）または analyze() を（他のテスト統合用として）追加できます。(Java) Javaの場合、 AxeWatcherController.analyze()](dh-java-watchercontroller#analyze) メソッドを使用します。

例えば、Cypressの場合：

describe('My Login Application', () => {
  it('should login with valid credentials', () => {
    cy.visit('https://the-internet.herokuapp.com/login')
      // Analyze the page.
      .axeWatcherAnalyze()      .get('#username')
      .type('tomsmith')
      .get('#password')
      .type('SuperSecretPassword!')
      .get('button[type="submit"]')
      .click()
      .wait(1000)
      // Analyze the page.
      .axeWatcherAnalyze()      // Restart automatic axe analysis.
      .axeWatcherStart()
      .get('#flash')
      .should('exist')
  })
})

「 コントローラーオブジェクトの取得 」を参照してください。テストフレームワーク用のコントローラーオブジェクトを取得する方法についての詳細が記載されています。

自動解析を有効にする

Cypress では、 axeWatcherStart コマンドを使用できます：

cy.axeWatcherStart()

他のテスト統合では、コントローラーオブジェクトの start メソッドを使用します：

await controller.start()

「 コントローラーオブジェクトの取得 」を参照してください。テストフレームワーク用のコントローラーオブジェクトを取得する方法についての詳細が記載されています。

関連情報

• (JavaScript/TypeScript) 手動モードテストの2つの実例（CypressおよびPlaywright）については、GitHubの watcher-examples リポジトリを参照してください：
  • Cypress の場合、 Cypress manual-mode
  • Playwright の場合、 Playwright manual-mode