Axe DevTools for WebのPlaywright APIリファレンス

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

@axe-devtools/playwrightパッケージのAPIリファレンス

Not for use with personal data

コンストラクター

標準の構成では、コンストラクターに渡す必要のある唯一の引数はPlaywrightインスタンスです。元々含まれているものとは異なるaxe-coreバージョンを使用したり、カスタムルールセットを使用したい場合は、これらのオプションをコンストラクターに渡すこともできます。

note

非標準のaxe-coreバージョンへの呼び出しを含むものを上書きします。カスタムルールセットを同時に選択することはできません。

Axe DevTools Playwrightコンストラクター：

AxeDevToolsBuilder({ page: PlaywrightPage, source: string, rulesetId: AxeDevtoolsRulesetID})

最初の引数としてPlaywrightPageのインスタンスを渡す必要があります。2番目の引数はルールセットIDまたはaxeオブジェクトのどちらかを指定できます。2番目の引数を指定しない場合、@axe-devtools/script-builderのカスタムルール構成ファイルを設定する必要があります。そうでないと、コンストラクタは例外をスローします。newキーワードを使って呼び出す必要があります。

// instantiate with the Section 508 rule set
const builder = new AxeDevToolsBuilder({ page, rulesetId: '508' });

// or with a specific axe instance
const { source } = require('../axe-core-2.3.0');
const builder = new AxeDevToolsBuilder({ page, source });

Axe DevToolsでカスタムルールを使用する方法については、カスタムルールセットの生成と統合に関するガイドを

Axe DevToolsでカスタムルールを使用する方法については、を読んでください。のカスタムルールセット生成と統合に関するガイドをお読みください。

analyze

AxeDevToolsBuilder.analyze(): Promise<axe.Results | Error>

分析を行い、結果オブジェクトとエラーを渡します。

new AxeDevToolsBuilder({ page })
  .analyze()
  .then(results => {
    console.log(results);
  })
  .catch(e => {
    // Do something with error
  });

analyzeUniversal

AxeDevToolsBuilder.analyzeUniversal(): Promise<UniversalExport>

分析を行い、Axe Universal Formatで結果を返します。既存のanalyze()メソッドは変更されません。

new AxeDevToolsBuilder({ page })
  .analyzeUniversal()
  .then(results => {
    console.log(results);
  })
  .catch(e => {
    // Do something with error
  });

チェーンオプション

Axe DevToolsスキャンの範囲を決定するためのオプションが2つあります。特定のCSSスコープを含めるか除外するか選択できます。以下のチェーンメソッドを使用すると、これを実現できます。これらのメソッドはチェーンして、複雑で集中したスキャンを作成することができます。

include

AxeDevToolsBuilder.include(selector: String | String[])

解析に含める要素のリストにCSSセレクタを追加します。.include()に渡された範囲外の要素はスキャンされません。

new AxeDevToolsBuilder({ page }).include('<CSS-Selector>');

exclude

AxeDevToolsBuilder.exclude(selector: String | String[])

解析から除外する要素のリストにCSSセレクタを追加します。.exclude()に渡された範囲外の要素のみがスキャンされます。

これらのメソッドは、更にスキャン範囲を絞るためにチェーンすることができます。

new AxeDevToolsBuilder({ page }).exclude('<CSS-Selector>');

この例では、<CSS-Selector>内のすべての要素がスキャンされ、<Inner-CSS-Selector>内の要素は除外されます:

new AxeDevToolsBuilder({ page }).include('<CSS-Selector>').exclude('<Inner-CSS-Selector>');

ルール設定

これらのオプションは、選択したルールセットのルール設定を変更します。これらのオプションは、標準のルール設定を上書きし、結果を変更します。これらのメソッドを追加で呼び出すと、前の呼び出しが上書きされます。

withRules

AxeDevToolsBuilder.withRules(rules: String|Array)

指定されたルールIDのみを分析対象として制限します。単一のルールIDの文字列または複数のルールIDの配列を受け入れます。

//with a single rule ID
AxeDevToolsBuilder({ page }).withRules('html-lang');

//with an array of rule IDs
AxeDevToolsBuilder({ page }).withRules(['html-lang', 'image-alt']);

withTags

AxeDevToolsBuilder.withTags(tags: String|Array)

提供されたタグでタグ付けされたルールのみを分析対象として制限します。単一のタグまたは複数のタグの配列を受け入れます。

//with a single tag
AxeDevToolsBuilder({ page }).withTags('wcag2a');

//with an array of tags
AxeDevToolsBuilder({ page }).withTags(['wcag2a', 'wcag2aa']);

disableRules

AxeDevToolsBuilder.disableRules(rules: String|Array)

提供されたルールの検証をスキップします。単一のルールIDを表す文字列、または複数のルールIDを含む配列を受け入れます。AxeDevToolsBuilder.options()、AxeDevToolsBuilder.disableRules()の後続の呼び出しで指定されたオプションを上書きします。

new AxeDevToolsBuilder({ page }).disableRules('color-contrast');

axe-coreオプション

これらのオプションは、基礎となるaxe-coreの構成にアクセスします。これらのオプションについての詳細はaxe-core ドキュメントをご参照ください。

設定

AxeDevToolsBuilder.configure(config: axe.Spec): AxeDevToolsBuilder

axe-coreの構成を設定します。この値はaxe.configure()に直接渡されます。

オプション

AxeDevToolsBuilder.options(runOptions: axe.RunOptions): AxeDevToolsBuilder

axe.run()に直接渡すオプションです。使用方法はaxe-core ドキュメントをご覧ください。AxeDevToolsBuilder.withRules()およびAxeDevToolsBuilder.withTags()への呼び出しを含む他の構成されたオプションを上書きします。

使用サービス

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

環境変数

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

名前	タイプ	上書き可能	説明
`AXE_DISTINCT_ID`	文字列	—	ログイン中のユーザーに対して同一であるUUID識別子（再生成されない限り）
`AXE_METRICS_URL`	文字列	—	REST使用エンドポイントのURL
`AXE_TRACK_USAGE`	ブール値	—	使用サービスのレポートを有効にします（デフォルトは`false`です）
`AXE_APPLICATION`	文字列	false	アクセシビリティエラーのチェックに使用されたアプリケーション
`AXE_DEV_INSTANCE`	ブール値	true	このイベントがソフトウェア開発者の行動によるものかを示します。開発またはテスト中に記録されたイベントをマークし、後で削除するのに便利です。
`AXE_DEPARTMENT`	文字列	true	組織内でのユーザーの部署
`AXE_KEYCLOAK_ID`	文字列	false	ユーザーのKeycloak ID
`AXE_LOGGED_IN`	ブール値	false	テスト対象アプリケーションにユーザーがログインしているかどうかを記録します
`AXE_ORGANIZATION`	文字列	true	ユーザーの組織
`AXE_SESSION_ID`	文字列	false	ユーザーのセッションを識別するUUID
`AXE_USER_ID`	文字列	false	特定のユーザーの名前やログインIDなどのアイデンティティ
`AXE_USER_JOB_ROLE`	文字列	false	ユーザーの役割
`AXE_USER_STATUS`	文字列	false	ユーザーに紐づけたいステータス情報

トラッキングの有効化

このメソッドにより、ユーザーはデータを使用サービスに送信することを選択できます。

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

トラッキングURLの設定

このメソッドにより、ユーザーは使用メトリクスデータの送信先を変更することができます。

.setTrackingUrl(url: string)

AxeDevToolsBuilder({ page }).setTrackingUrl('https://foobar.biz')

異なるIDの設定

このメソッドにより、ユーザーは格納または使用する異なるIDを変更することができます。

.setDistinctId(distinctId: string)

AxeDevToolsBuilder({ page }).setDistinctId('foobar')