前回【自動化テスト入門①】Katalonで学ぶCSSセレクタ基本編でCSSセレクタについて説明しました。今回はXPathで要素を選択する方法についてまとめました。
XPathとは
XPath は、HTMLやXMLの要素を指定するための書き方です。CSSセレクタと同じように、特定の要素を取得するために使われます。
特に、自動化テストでは以下のような場面でよく利用されます。
- 特定のテキストを持つ要素を探したい
- 親子関係を細かく指定したい
- CSSセレクタでは取得しにくい要素を選択したい
Katalon Studio や Selenium でも頻繁に使われるため、基本的な書き方を覚えておくと便利です。
/ と // の違い
XPathでは / と // の違いがとても重要です。
/は直下の子要素のみを選択します。//は階層を飛び越えて、内側にある子孫要素すべてを検索できます。 CSSセレクタの「>」と「スペース（半角空白）」の違いに近いイメージです。
/ （直下の子要素）
HTML例：
<div class="main-box">
<button>ログイン</button> <!-- ① 選択される -->
<div>
<button>キャンセル</button> <!-- ② 選択されない -->
</div>
</div>
XPath例：
//div[@class='main-box']/button 選択される要素：
<button>ログイン</button>
// （子孫要素すべて）
HTML例：
<div class="main-box">
<button>ログイン</button> <!-- ① 選択される -->
<div>
<button>キャンセル</button> <!-- ② 選択される -->
</div>
</div>
XPath例：
//div[@class='main-box']//button選択される要素：
<button>ログイン</button>
<button>キャンセル</button>
タグ指定
タグ名をそのまま指定できます。
HTML例：
<div>
<input type="text">
<button>ログイン</button>
</div>
XPath例：
//button
<!-- 全てのbuttonタグを選択 -->
選択される要素：
<button>ログイン</button>
属性指定
@属性名 を使って要素を指定します。
HTML例：
<button id="login-btn">
ログイン
</button>
<button id="cancel-btn">
キャンセル
</button>
XPath例：
//button[@id='login-btn']
<!-- idがlogin-btnのbuttonを選択 -->
選択される要素：
<button id="login-btn">
ログイン
</button>
class指定
class属性も指定できます。
HTML例：
<button class="login-btn">
ログイン
</button>
<button class="cancel-btn">
キャンセル
</button>
XPath例：
//button[@class='login-btn']
<!-- classがlogin-btnのbuttonを選択 -->
選択される要素：
<button class="login-btn">
ログイン
</button>
テキスト指定
特定の文字を持つ要素を取得できます。
HTML例：
<button>ログイン</button>
<button>キャンセル</button>
XPath例：
//button[text()='ログイン']
<!-- テキストがログインのbuttonを選択 -->
選択される要素：
<button>ログイン</button>
contains（文字を含む）
contains() を使うと、一部の文字を含む要素を取得できます。
1. class属性に文字を含む
HTML例：
<button class="login-btn">
ログイン
</button>
<button class="login-submit">
送信
</button>
<button class="cancel-btn">
キャンセル
</button>
XPath例：
//button[contains(@class,'login')]
<!-- class属性にloginを含むbuttonを選択 -->
選択される要素：
<button class="login-btn">
ログイン
</button>
<button class="login-submit">
送信
</button>
2. テキストに文字を含む
HTML例：
<button>
ログインはこちら
</button>
XPath例：
//button[contains(text(),'ログイン')]
<!-- ログインを含むbuttonを選択 -->
選択される要素：
<button>
ログインはこちら
</button>
and条件
複数条件を同時に指定できます。
HTML例：
<button class="login-btn" type="submit">
ログイン
</button>
<button class="login-btn" type="button">
キャンセル
</button>
XPath例：
//button[@class='login-btn' and @type='submit']
<!-- classとtypeの両方が一致するbuttonを選択 -->
選択される要素：
<button class="login-btn" type="submit">
ログイン
</button>
or条件
どちらかの条件に一致する要素を選択できます。
HTML例：
<button type="submit">
ログイン
</button>
<button type="button">
キャンセル
</button>
XPath例：
//button[@type='submit' or @type='button']
<!-- submit または button を選択 -->
選択される要素：
<button type="submit">
ログイン
</button>
<button type="button">
キャンセル
</button>
sibling（兄弟要素）
兄弟要素を取得するときに使います。
1. following-sibling
後ろにある兄弟要素を選択します。
HTML例：
<label>Email</label>
<input type="text">
XPath例：
//label/following-sibling::input
<!-- labelの後ろにあるinputを選択 -->
選択される要素：
<input type="text">
2. preceding-sibling
前にある兄弟要素を選択します。
HTML例：
<label>Email</label>
<input type="text">
XPath例：
//input/preceding-sibling::label
<!-- inputの前にあるlabelを選択 -->
選択される要素：
<label>Email</label>
親要素取得
親要素を取得することもできます。
HTML例：
<div class="wrapper">
<button>ログイン</button>
</div>
XPath例：
//button/parent::div
<!-- buttonの親divを選択 -->
選択される要素：
<div class="wrapper">
<button>ログイン</button>
</div>
何番目の要素を指定
XPathでも順番指定ができます。
HTML例：
<ul>
<li>ホーム</li>
<li>ログイン</li>
<li>お問い合わせ</li>
</ul>
XPath例：
//li[2]
<!-- 2番目のli要素を選択 -->
選択される要素：
<li>ログイン</li>
練習Tips
XPathも、Chromeの開発者ツールで実際に試しながら覚えるのがおすすめです。
- Mac：Command + Option + F
- Windows：Ctrl + F
例えば：
のように入力して、1つだけ要素が選択されていれば成功です。複数選択される場合は、指定範囲が広すぎる可能性があります。
この場合、同じ「コピー」buttonが複数存在していたため、対象を一つに限定するために //footer タグで範囲を絞っています。
注意点
XPathは便利ですが、書き方が複雑になりやすい特徴があります。特に、HTML構造に強く依存している場合、画面デザインの変更によって動かなくなることもあります。
そのため、実際の現場では：
- まずCSSセレクタを試す
- 難しい場合はXPathを使う
という使い分けもよく行われています。
終わりに
XPathは触ったことがなかったので、最初難しく感じましたが、何回か練習するうちにだんだんわかるようになってきました！クイズなどAIに頼んで予習や復習するのもいいでしょう。
次回は、実際に簡単なテスト用ページを作成しながら、Katalonを触ってみたいと思います。少しずつ実際の操作にも触れていく予定なので、興味がある方はぜひ次回も見ていただけると嬉しいです！
