Webアプリケーションのテストでは、CSSセレクターやXPathを使用して要素を選択する場面があります。

Autifyでシナリオをレコーディングする際は、CSSセレクターやXPathを意識する必要はありませんが、ロケータやJSステップを使用する際にCSSセレクターやXPathを書く場面が発生します。

Google Chromeのデベロッパーツールを使用すると要素のCSSセレクターやXPathが簡単に取得出来ますが、デベロッパーツールで取得したCSSセレクターやXPathをそのままロケータやJSステップで使用すると上手くいかないケースがあります。

当記事では、安定するロケータの指定仕方を、主にXPathを用いた手法に絞って解説します。

CSSセレクターとXPathの違いと使い分け

ロケータやJSステップでCSSセレクターとXPathのどちらを使うべきか悩むことがあるかと思います。それぞれの違いと利点を理解することで、適切な選択が可能になります。

CSSセレクター: HTML要素のスタイリングのために使われる選択手法で、直感的に書くことが可能です。
XPath: XMLおよびHTMLドキュメント内の要素を選択するための言語です。柔軟性が高く、親子関係や要素が持つテキスト、位置による選択など、より複雑な要素選択が可能です。

シンプルな構造の要素を選択する場合: CSSセレクターを選ぶと良いでしょう。直感的で簡単に記述でき、HTMLのスタイリングに基づいた要素選択が可能です。
複雑な階層や条件が必要: XPathはより複雑な条件や親子関係に基づいて要素を選択できるため、複雑な構造の中から特定の要素を選びたい場合に適しています。

XPathの利点は、CSSセレクターでは難しい親要素や兄弟要素を基準とした選択が可能である点です。また、特定のテキストを含む要素を選択するなど、複雑なロジックを使いたいときに便利です。

CSSセレクター/XPathの取得方法

ブラウザの開発者ツールを使うことで、簡単にCSSセレクターやXPathを取得できます。