要素の検索ステップを作成する際、要素を選択するのにCSSセレクターとXPath式のどちらを使うのが有利か悩むかもしれません。どちらもウェブ要素にアクセスし、サイトのDOM全体にアクセスするために使われる強力なツールですが、どちらも客観的に「より良い」とは言えません。結局のところ、CSSを使うかXPathを使うかは、文脈によって決まります。
CSSセレクターとXPath式の使い分けに関する詳細についてはこちらをお読みください。
CSSクエリやXPathを使用して特定の要素を指定して操作する前に、[検索の設定] を使用して、対象となる要素にあるはずの属性を指定してみてください。
検索の設定は、CSSやXPathを使用するステップと同じユースケースを多数処理しますが、問題が発生したとき、トラブルシューティングにCSSやXPathの知識が不要であるため、よりテストのメインテナンスが容易です。
CSSセレクターが適している場合 (CSSセレクターの特長):
CSS (カスケーディングスタイルシート) は、XMLやHTMLなどのマークアップ言語で書かれたドキュメントの表現の詳細を記述するための言語です。CSSでは、HTMLエレメントの画面上での表示方法を記述します。CSSは、さまざまなデバイスや画面サイズに対応したデザイン、レイアウト、表示のバリエーションを実現するのに役立ちます。詳細については、こちらをご覧ください。
CSSセレクターを使用する理由として以下が挙げられます：
- 一般にXPathよりも速い
- 構文は学びやすく理解しやすい
- 開発でよく使用される（JQueryではCSSが多用される）
- XPath式で行えることはほとんど行える
- Shadow DOMの要素をターゲットにしている - Shadow DOMの要素はXPathでターゲットにすることはできません
W3Schoolsは、CSSセレクターと構文について詳しく学ぶのに最適なリソースです。
XPath IDが適している場合 (XPath IDの特長)
XPathはXMLパス言語であり、XMLドキュメントからノードを選択するのに使用するクエリ言語です。通常、XPath IDに基づいてエレメントを見つける方法は非常に効果的に機能し、柔軟性にも優れています。XPathの表現式は、コンピューターの従来のファイルシステムを使用する際に目にする表現によく似ています。ただし、XPathをメインのロケーター方式として使用する領域では、XPathの影響で処理速度が低下する可能性があります。
XPath式を使用する理由として以下が挙げられます：
- テキストによって要素を検索している
- 子要素を使用して親要素を見つけている
XPathとCSSの大きな違いの1つは、XPathがDOM階層の順方向/逆方向の両方でエレメントを検索できるのに対し、CSSは順方向でしか動作しないことです。このため、XPathでは、子エレメントを使用して親エレメントを見つけることができます。ただし、ほぼすべてのブラウザーで、XPath IDを使ってネストされた兄弟関係をたどったり、テーブルを走査したりするのは高コストです。
Devhints.ioには、XPath式と構文について詳しく学ぶのに最適なリソースがあります。