Upgrade to Pro — share decks privately, control downloads, hide ads and more …

E2E自動テストのロケータの使い分けを考えてみたの

SmartHR QAグループ
February 20, 2024
570

 E2E自動テストのロケータの使い分けを考えてみたの

JaSST nano vol.33に登壇した際のスライドです。

https://jasst-nano.connpass.com/

参考:

単体テストの考え方/使い方
https://www.amazon.co.jp/dp/4839981728

ロケーターを学んでテスト自動化上級者を目指そう
https://speakerdeck.com/nozomiito/roketawoxue-ndetesutozi-dong-hua-shang-ji-zhe-womu-zhi-sou

【アクセシビリティ】WAI-ARIAを完全に理解した。
https://qiita.com/degudegu2510/items/dd072655880adbe3f58c

SmartHR QAグループ

February 20, 2024
Tweet

Transcript

  1. data-testid属性そのものも懸念がないわけではない • data-testid属性そのもののメンテナンスが増える ◦ UIの実装時にdata-testid属性にユニークなIDをセットしなければならない ◦ UIの変更時にdata-testid属性への影響を考慮しないといけない • デザイン変更への適応の遅れ ◦

    DOM構造の変更の影響を受けない反面、その問題に気付けなくなってしまう • セマンティクスの喪失 ◦ data-testid属性はテストのためだけのもので、それ以上の意味を持たない ◦ HTMLに対する意味を理解する上での助けにならない data-testid属性は便利だが…
  2. セマンティクスな例 • aria属性 ◦ アクセシビリティ向上のための WAI-ARIAの属性 ◦ aria-labelやaria-labelledbyなどがあり、コンテンツの状態や性質を示す • role属性

    ◦ こちらもWAI-ARIAの属性 ◦ HTML要素が通常のセマンティクスを超えた役割を果たす場合に使用される ▪ <div>がボタンの役割を果たす場合など
  3. WAI-ARIAとは WAI-ARIAは、Web Accessibility Initiative Accessible Rich Internet Applicationsの略で、アクセシビリ ティ向上の目的で、W3Cが定めた仕様です。 WAI-ARIAをつかうことで、HTMLで表現できない意味

    (セマンティック)を属性で補完することができ、スク リーンリーダーなどの支援技術を通じて、障害を持つ方に対しても適切な情報を伝えられるようになりま す。 WAI-ARIAにはコンテンツの役割を示す role属性とコンテンツの状態や性質を示す aria属性が定義されて、 role属性やaria属性を使いこなすことで、意味ない <div> なのでネストされた複雑な UIの意味(セマンティッ ク)を補完して、アクセシビリティを向上させることができます。 引用元:【アクセシビリティ】WAI-ARIAを完全に理解した。
  4. • E2Eテストの要素取得の方法は様々ある ◦ 要素を取得するためにプロダクトコードに手を加えることも考える • data-testid属性はテストのためには便利 ◦ テストのためだけであることを忘れない ▪ 本番へのリリース時には削除するという運用もあるらしい

    ◦ WAI-ARIAやその他セレクターをうまく使えないかを考えたうえで利用する • WAI-ARIAを使うとプロダクトのアクセシビリティの向上にもつながる ◦ 副次的にアクセシビリティに対する意識が高まりそう まとめ