WebdriverIOの新しいアクセシビリティセレクタで、アプリのアクセシビリティを維持し、E2Eテストを安定させる

2022年9月5日 ·読み時間3分

E2Eテスト内での要素の取得は、非常に難しい場合があります。複雑なCSSパスや任意のテストIDを使用すると、読みづらくなったり、失敗しやすくなったりします。テストが失敗したときの失望は、アクセシビリティを考慮せずに構築されたアプリケーションでスクリーンリーダーなどの補助デバイスを使用する必要がある人が経験する悪い経験にはるかに及びません。

バージョンv7.24.0で導入されたアクセシビリティセレクタにより、WebdriverIOは、特定のアクセシビリティ名を含むさまざまな要素を取得するための強力な方法を提供するようになりました。補助デバイスでは認識されない任意のdata-testIdプロパティを要素に適用するのではなく、開発者やQAエンジニアは、要素に正しいアクセシビリティ名を適用するか、開発チームにアクセシビリティの改善を依頼して、テストの記述を容易にすることができます。

WebdriverIOは内部的にXPathセレクタ条件の連鎖を使用して、正しい要素を取得します。フレームワークはブラウザのアクセシビリティツリーにアクセスできないため、正しい名前を推測することしかできません。アクセシビリティ名は、作成者によって提供された名前とコンテンツ名に基づいて計算されるため、WebdriverIOは特定の順序で要素を取得します。

まず、有効なIDを含む要素を指すaria-labelledByまたはaria-describedByプロパティを持つ要素を探します。例えば、
```
<h2 id="social">Social Media</h2>
<nav aria-labelledBy="social">...</nav>
```
そのため、ナビゲーション内の特定のリンクを取得するには、次のようにします。
```
await $('aria/Social Media').$('a=API').click()
```
次に、特定のaria-labelを持つ要素を探します。例えば、
```
<button aria-label="close button">X</button>
```
要素の取得にXを使用したり、テストIDプロパティを適用する代わりに、次のようにすることができます。
```
await $('aria/close button').click()
```
適切に定義されたHTMLフォームは、すべての入力要素にラベルを提供します。例えば、
```
<label for="username">Username</label>
<input id="username" type="text" />
```
入力値の設定は、次のように行うことができます。
```
await $('aria/Username').setValue('foobar')
```
理想的ではありませんが、それでも機能するのはplaceholderまたはaria-placeholderプロパティです。
```
<input placeholder="Your Username" type="text" />
```
これを使用して要素を取得することもできます。
```
await $('aria/Your Username').setValue('foobar')
```
さらに、画像タグが特定の代替テキストを提供する場合、これを使用してその要素もクエリできます。例えば、
```
<img alt="A warm sommer night" src="..." />
```
このような画像は、次のように取得できます。
```
await $('aria/A warm sommer night').getTagName() // outputs "img"
```
最後に、適切なアクセシビリティ名が導出できない場合は、蓄積されたテキストによって計算されます。例えば、
```
<h1>Welcome!</h1>
```
このような見出しタグは、次のように取得できます。
```
await $('aria/Welcome!').getTagName() // outputs "h1"
```

ご覧のとおり、要素のアクセシビリティ名を定義するにはさまざまな方法があります。多くのブラウザデバッグツールには、要素の適切な名前を見つけるのに役立つ便利なアクセシビリティ機能が備わっています。

Getting Accessibility Name in Chrome DevTools

詳細については、Chrome DevToolsまたはFirefox Accessibility Inspectorのドキュメントをご覧ください。

アクセシビリティは、包括的なウェブを作成するための強力なツールであるだけでなく、安定した読みやすいテストを作成するのにも役立ちます。すべての要素にaria-labelを与えるべきではありませんが、この新しいセレクタは、アクセシビリティを考慮したウェブアプリケーションを構築するのに役立ち、後でE2Eテストを作成することをはるかに容易にします。

お読みいただきありがとうございます！