スキャンを管理する

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

Watcherの手動モードを使うことで、サイトのどのページをいつ解析するかを選択できます

Not for use with personal data

デフォルトでは、 自動モード", "context": "emphasized textと呼ばれる状態で、axe Watcherはウェブページを解析するタイミングを自動的に判断します（テストスイートで訪問した場合やページのDOMに変更が検出された場合など）。この自動解析により、組織の目標に合わない動作を引き起こすことがあります。たとえば、興味のないページや組織の他の部署のページを過剰に解析してしまうことがあります。自動モードをオフにすることで、ウェブページを解析するタイミング（または解析するかどうか）を決定することができます（ 手動モード", "context": "link textとして知られています）。

シナリオ

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

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

次のステップ

設定で自動解析を無効にする", "context": "link text ことで、カタログページのテストを避けます。
自動解析を有効にする", "context": "link text ことで、ショッピングカートページでの自動アクセシビリティテストを開始します。
呼び出しで自動解析を無効にする", "context": "link text ことで、ショッピングカートページ以降に訪問されるページのテストを防ぎます。

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

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

次のステップ

設定で自動解析を無効にする", "context": "link text ことで、読み込みアニメーションやUIがアクセシビリティエラーのテストを受けないようにします。
自動解析を有効にする", "context": "link text ことで、ページの完全な読み込み後に自動アクセシビリティテストを再開します。

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

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

次のステップ

設定で自動解析を無効にする", "context": "link text ことで、ページが必要とする状態になる前にアクセシビリティ解析が行われるのを防ぎます。
手動でページを解析する", "context": "link text ことで、関心のある特定のページ状態をテストします。

大規模なテストスイートの範囲を制限する

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

次のステップ

設定で自動解析を無効にする", "context": "link text ことで、テストスイートの開始時から自動アクセシビリティ解析が開始されるのを防ぎます。
自動解析を有効にする", "context": "link text ことで、テストしたいテストスイートの部分に到達したときにテストを開始します。
呼び出しで自動解析を無効にする", "context": "link text ことで、アクセシビリティエラーのテストを希望しないテストスイートの部分でのテストを防ぎます。

手動モードの使い方

設定で自動解析を無効にすることができます（下記の設定で自動解析を無効にする", "context": "link text を参照してください）。

ページ分析は、 Controller オブジェクトまたはCypressの同等のコマンドの3つのメソッドで制御されます。", "context": "paragraph

analyze() （Cypressの場合：", "context": "paragraph cy.axeWatcherAnalyze()）で現在のページの解析を実行します。", "context": "paragraph
start() （Cypressで: cy.axeWatcherStart()）を使用して自動アクセシビリティ解析を有効にします。
stop() （Cypressで: cy.axeWatcherStop()）を使用して自動アクセシビリティ解析を無効にします。

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

（JavaScript/TypeScript）コントローラーオブジェクトを取得するための情報は、 Controller オブジェクトについては、 ステップ4 にあるテストフレームワークの説明ページを参照してください:

JavaScript：

TypeScript：

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

Selenium

Cypress

（JavaScript/TypeScript）Cypressの場合、グローバルオブジェクトを使用できます。 cy これらの同等のコマンドを使って:

コントローラーメソッド	Cypressコマンド
`analyse()`	`axeWatcherAnalyze()`
`flush()`	`axeWatcherFlush()`
`start()`	`axeWatcherStart()`
`stop()`	`axeWatcherStop()`

Playwrightテスト

（JavaScript/TypeScript）Playwrightテストの場合、 Controller オブジェクト（PlaywrightController）は、 pageを含む axeWatcher オブジェクトから取得できます。 axeWatcher オブジェクトを使用して、 Controller メソッドを呼び出すことができます（以下の例は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 API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: 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()。

たとえば、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()

特定のテスト実行でのみウォッチャーを実行する

エンドツーエンドテストは、時間やクラウドコンピューティングコストがかかる可能性があります。すべてのコミットやすべてのテスト実行でページを解析するのではなく、必要に応じて明示的にアクセシビリティスキャンを行いたい場合があります。環境変数の値を autoAnalyzeに渡して解析を制御できます。これにより、解析を含まないテストコマンドと、解析を含むテストコマンドの2つの異なるコマンドを持つことができます。

（JavaScript/TypeScript）たとえば、Cypressの設定で：

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

const API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const ACCESSIBILITY_TESTING = process.env.ACCESSIBILITY_TESTING === 'true'

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

あなたの package.jsonに2つのスクリプトを追加します。一つは変数を設定し、もう一つは設定しない：

{
  "scripts": {
    "test:e2e": "cypress run",
    "test:e2e:accessibility": "ACCESSIBILITY_TESTING=true cypress run"
  }
}

Windowsで、クロスプラットフォームの方法で環境変数を設定するには、 cross-env 変数を設定します。どんな環境変数名も自由に選べます。 ACCESSIBILITY_TESTING は一例に過ぎません。

同じ方法が、他のJavaScriptとTypeScriptのテストフレームワークにも適用されます。設定ファイルで変数を読み取り、そのブール値を autoAnalyzeに渡します。（Java） Javaユーザーはその値を setAutoAnalyze()に渡すことができます。

note

この方法は、Watchがページを解析するかどうかを制御するものであり、Watchが初期化されるかどうかを制御するものではありません。環境変数の値に関係なく、一部のWatchの設定はテスト環境で引き続き行われます。

スキャンを管理する

シナリオ

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

次のステップ

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

次のステップ

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

次のステップ

大規模なテストスイートの範囲を制限する

次のステップ

手動モードの使い方

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

Cypress

Playwrightテスト

設定で自動解析を無効にする

自動解析を無効にする呼び出し

手動ページ解析

自動解析を有効にする

特定のテスト実行でのみウォッチャーを実行する

関連情報

Is this page helpful?

Help us improve this page

Still need help?