Selenium 4で活用する相対ロケータ｜above・belowを使った柔軟な要素指定法

Selenium 4の登場により、Web要素の特定方法は劇的な進化を遂げました。

従来のIDやXPath、CSSセレクタによる指定に加え、直感的な位置関係で要素を探す「相対ロケータ（Relative Locators）」が導入されたためです。

この記事では、特に利用頻度の高いabove（上）とbelow（下）に焦点を当て、柔軟な要素指定の実装方法を詳しく解説します。

開発現場で直面する「IDが動的で指定しづらい」といった課題を解決するための強力な武器となるでしょう。

Selenium 4の相対ロケータとは

相対ロケータは、特定の要素を基準点として、その周辺にある要素を探索する仕組みです。

内部的にはJavaScriptのgetBoundingClientRect()を利用しており、ブラウザ上の視覚的な位置関係に基づいて要素を特定します。

従来のXPathによる複雑な階層指定に比べ、コードの可読性が飛躍的に向上するのが大きなメリットです。

Selenium 4では、この相対ロケータを利用するためにwithTagNameメソッドを使用します。

以前は「Friendly Locators」とも呼ばれていましたが、現在は「Relative Locators」として公式に定義されています。

相対ロケータが推奨されるケース

Webサイトのデザインにおいて、入力フォームやラベルの配置は人間にとって理解しやすい構造になっています。

しかし、ソースコード上では必ずしも親子の階層構造が分かりやすいとは限りません。

例えば、テーブル形式のデータや、リスト項目が並ぶUIでは、特定のテキストの「下」にある入力フィールドを操作したい場面が多々あります。

このような場合に、相対ロケータを使用することで直感的なスクリプトを記述できます。

above（上方向）を使った要素の特定

aboveメソッドは、基準となる要素の「上」に位置する要素を探す際に使用します。

例えば、送信ボタンのすぐ上にあるメールアドレス入力欄を特定したい場合に非常に有効です。

以下のサンプルコードでは、指定したボタンの上にあるinput要素を取得する方法を示します。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with

driver = webdriver.Chrome()
driver.get("https://example.com/login")

# 基準となる要素（ログインボタン）を取得
submit_button = driver.find_element(By.ID, "submit")

# ログインボタンの「上」にあるinput要素を特定
email_field = driver.find_element(locate_with(By.TAG_NAME, "input").above(submit_button))

email_field.send_keys("test@example.com")

このように、locate_withメソッドで対象のタグ名を指定し、続けてabove()で基準要素を渡します。

これにより、複雑なDOM構造を意識せずに、見た目通りの位置関係でコーディングが可能になります。

below（下方向）を使った要素の特定

belowメソッドは、基準となる要素の「下」に位置する要素を探す際に使用します。

見出しテキストの直下にある説明文や、ラベルの直下にあるチェックボックスを取得する際に便利です。

特に、IDが自動生成されるようなモダンなフロントエンドフレームワークを採用しているサイトで威力を発揮します。

# 基準となる要素（「ユーザー名」というラベル）を取得
label_element = driver.find_element(By.XPATH, "//label[text()='ユーザー名']")

# ラベルの「下」にあるinput要素を特定
username_input = driver.find_element(locate_with(By.TAG_NAME, "input").below(label_element))

username_input.send_keys("selenium_user")

上記のコードでは、ラベルのテキストを基準に、そのすぐ下にある入力フォームを操作しています。

XPathだけで同様のことを行おうとすると、兄弟要素や階層を辿る記述が必要になり、保守性が低下しがちです。

belowを活用すれば、HTML構造の変化に強いテストコードが書けます。

相対ロケータの主要メソッド一覧

Selenium 4では、aboveやbelow以外にも位置関係を指定するメソッドが用意されています。

これらを組み合わせることで、さらに精度の高い要素特定が可能になります。

これらのメソッドを連鎖させて、例えば「Aの右にあり、かつBの上にある要素」といった詳細な条件指定も可能です。

複数の位置条件を組み合わせる応用例

実際のWebページでは、同じタグ名の要素が複数並んでいることが少なくありません。

その場合、一つの条件だけでは要素を一意に特定できないことがあります。

相対ロケータはチェーン（連結）して記述することができるため、複数の視覚条件を重ねることが可能です。

# 「商品名」の右にあり、かつ「購入」ボタンの上にある価格表示を取得
price_element = driver.find_element(
    locate_with(By.TAG_NAME, "span")
    .toRightOf(product_name_element)
    .above(buy_button_element)
)

print(price_element.text)

¥2,980

このように複数のメソッドを繋げることで、ピンポイントでターゲット要素を絞り込むことができます。

この柔軟性こそが、Selenium 4における自動化プログラミングの醍醐味と言えるでしょう。

相対ロケータを使用する際の注意点

非常に便利な相対ロケータですが、利用時にはいくつか注意すべきポイントがあります。

まず、レスポンシブデザインのサイトでは、画面サイズ（ウィンドウ幅）によって要素の配置が変わる可能性があります。

PC表示では「右」にある要素が、スマホ表示では「下」に回り込むといったケースに注意が必要です。

また、基準となる要素が画面内に表示されていない（ビューポート外にある）場合、正しく認識されないことがあります。

さらに、あまりにも多くの相対ロケータを多用すると、要素の検索処理が従来のID指定に比べて低速になる可能性があります。

基本的には一意のIDやClassを使用し、どうしても指定が困難な場合に「補助的な手段」として相対ロケータを活用するのがベストプラクティスです。

まとめ

Selenium 4で導入された相対ロケータのaboveとbelowは、Web自動化をより直感的かつ強力にする機能です。

IDやXPathに依存しすぎない柔軟な要素指定をマスターすることで、メンテナンス性の高いテストスクリプトを構築できます。

特に動的なUIを持つモダンなWebアプリケーションにおいて、その真価を発揮するでしょう。

まずはシンプルなフォームの操作から、相対ロケータの利便性をぜひ体感してみてください。

今後もSeleniumの進化に注目し、最適なロケータ戦略を使い分けることが、安定した自動化への近道となります。