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})

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

// 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でカスタムルールを使用する方法については、カスタムルールセットの生成と統合に関するガイドを

CLIガイドを読んでください。

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')