Seleniumで動的IDの要素を特定する方法｜Pythonで不安定なセレクターを回避する実務解説

2026年5月15日

要素特定

現代のウェブアプリケーション開発において、ReactやVue.jsといったJavaScriptフレームワークの普及により、HTML要素のIDが実行時に生成されるケースが増えています。

このような動的IDは、ページをリロードしたりデプロイが行われたりするたびに値が変化するため、従来の固定的なID指定では要素を特定できません。

自動テストやスクレイピングの現場では、昨日まで動いていたスクリプトが突然エラーで停止するというトラブルが頻発します。

Seleniumを使用したブラウザ自動化において、変化し続けるIDに依存しない堅牢なセレクターの実装は、保守性を高めるための必須技術です。

本記事では、PythonとSeleniumを組み合わせて、動的IDを持つ要素を確実かつ安定して特定するための実務的な手法を詳しく解説します。

目次 [ close ]

動的IDが発生する理由とその構造的な特徴

動的IDとは、id="ember-123"やid="button-f4a2b9"のように、システムによって自動生成される識別子のことです。

これらは多くの場合、フレームワークがコンポーネントを管理するために内部的に割り振るもので、人間が判別するための固定値ではありません。

特にシングルページアプリケーション（SPA）では、コンポーネントの再レンダリングに伴い、末尾の数値やハッシュ値が書き換わることが一般的です。

動的IDを持つ要素を観察すると、多くの場合で「不変の部分」と「可変の部分」が組み合わさっていることに気づくはずです。

例えば、id="login_user_8829"というIDであれば、login_user_の部分は固定されており、後の数字だけが変化します。

この「パターンの法則性」を見つけ出すことが、安定した要素特定への第一歩となります。

まずは、対象となるウェブサイトのソースコードを複数回確認し、どの部分が固定でどの部分が変化するのかを正確に把握しましょう。

XPathを活用した部分一致による要素特定

動的IDへの対策として最も強力な手段の一つが、XPath（XML Path Language）を利用した部分一致検索です。

XPathには文字列を操作する関数が備わっており、IDの一部が合致する要素を柔軟に検索できます。

contains関数による部分一致

contains()関数を使用すると、特定の文字列が含まれている属性を持つ要素を抽出できます。

例えば、IDがsubmit-button-xyz123のように変化する場合でも、submit-buttonというキーワードが含まれていれば特定可能です。

Python

# IDに "submit-button" が含まれるボタンを特定する例
element = driver.find_element(By.XPATH, "//button[contains(@id, 'submit-button')]")
element.click()

この方法は非常に汎用性が高く、多くの動的要素に対して有効な解決策となります。

starts-with関数による前方一致

IDの先頭部分が固定されている場合は、starts-with()関数を利用するのが効率的です。

後方部分がランダムな文字列であっても、接頭辞が一定であれば誤爆の少ない正確な特定が行えます。

Python

# IDが "user_profile_" で始まるdiv要素を特定する例
profile_div = driver.find_element(By.XPATH, "//div[starts-with(@id, 'user_profile_')]")

前方一致は、システムが生成するプレフィックスを利用できるため、「特定の機能を持つ要素」を絞り込むのに最適です。

CSSセレクターによるパターンマッチング

XPathと同様に、CSSセレクターも動的な属性値を扱うための強力なワイルドカード機能を備えています。

CSSセレクターはXPathに比べて記述が簡潔であり、ブラウザの解析速度も速いというメリットがあります。

CSSセレクターの属性演算子

CSSでは、特定の記号を用いることで「前方一致」「後方一致」「部分一致」を表現できます。

演算子	一致の種類	記述例
`^=`	前方一致	`[id^='prefix_']`
`$=`	後方一致	`[id$='_suffix']`
`*=`	部分一致	`[id*='keyword']`

これらの演算子を組み合わせることで、複雑な動的IDにも対応可能です。

Python

# IDの末尾が "_save" で終わるボタンを特定する例
save_btn = driver.find_element(By.CSS_SELECTOR, "button[id$='_save']")

後方一致（$=）は、XPath 1.0では直接サポートされていない機能（ends-withが使えないため）であるため、CSSセレクターを使用する大きな利点となります。

親要素や兄弟要素からの相対的な特定

ID自体が完全にランダムで規則性がない場合、その要素自体をターゲットにするのは得策ではありません。

その代わりに、「絶対に変わらない静的な親要素」を起点にして、そこからの相対的な位置関係で特定します。

親要素を経由した特定

例えば、入力フォーム全体のIDは固定されているが、その中の各入力項目のIDが動的であるというケースは多々あります。

このような時は、まずフォームを特定し、その配下にある要素を探します。

Python

# 静的な親要素（form）を特定してから、その中の2番目のinputを取得
parent_form = driver.find_element(By.ID, "static-registration-form")
target_input = parent_form.find_element(By.TAG_NAME, "input")

この手法は「入れ子構造」を利用するため、ページ構造が大きく変わらない限り、非常に高い安定性を誇ります。

兄弟要素やインデックスの利用

同じ階層に並んでいる要素の中で、特定のラベル（テキスト）を持つ要素の隣にある入力欄を取得したい場合などに有効です。

XPathのfollowing-sibling軸などを使用すると、目的の要素へ辿り着けます。

Python

# "メールアドレス" というテキストを持つラベルの、次の要素（input）を特定
xpath_query = "//label[text()='メールアドレス']/following-sibling::input"
email_field = driver.find_element(By.XPATH, xpath_query)

このように、「人間が見た時の位置関係」をコードに落とし込むことが、動的IDを回避する秘訣です。

Selenium 4の相対ロケーターを活用する

Selenium 4からは「Relative Locators（相対ロケーター）」という直感的な機能が追加されました。

これは、特定の要素に対して「上にある（above）」「下にある（below）」「左にある（to_left_of）」「右にある（to_right_of）」といった指定ができる機能です。

Python

from selenium.webdriver.support.relative_locator import with_tag_name

# "Password"ラベルのすぐ下にあるinput要素を特定
password_field = driver.find_element(with_tag_name("input").below({By.ID: "password-label"}))

動的IDに悩まされることなく、UI上のレイアウトに基づいて要素を見つけ出せるため、コードの可読性が飛躍的に向上します。

ただし、レスポンシブデザインなどで要素の配置が動的に変わるサイトでは、意図しない要素を掴む可能性がある点に注意が必要です。

テキスト内容を基準にした特定手法

IDやクラス名が頻繁に変わるサイトでも、ボタンに表示されている文言やリンクのテキストは変更されにくい傾向にあります。

driver.find_element(By.LINK_TEXT, "ログアウト")のように、ユーザーの目に触れる情報をキーにすることで、内部的なIDの変化を無視できます。

XPathを併用すれば、完全一致だけでなく部分一致でのテキスト検索も可能です。

Python

# "送信" という文字を含むボタンを探す
submit_btn = driver.find_element(By.XPATH, "//button[contains(text(), '送信')]")

「ユーザーが何を見て操作するか」という視点でセレクターを設計することは、UIテストにおいて非常に本質的なアプローチです。

動的要素を待機する「明示的待機」の重要性

動的IDを持つ要素は、しばしば非同期通信（Ajax）によって後から生成されることがあります。

要素を特定するロジックが正しくても、要素がDOM上に現れる前に検索を実行してしまうと、NoSuchElementExceptionが発生します。

これを防ぐために、WebDriverWaitを用いた明示的待機を必ずセットで実装しましょう。

Python

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 要素が表示されるまで最大10秒間待機する
wait = WebDriverWait(driver, 10)
element = wait.until(EC.presence_of_element_located((By.XPATH, "//div[contains(@id, 'dynamic-')]")))

単に「要素を特定する」だけでなく、「要素が現れるのを待ってから特定する」という一連の流れをルーチン化することが、スクリプトの成功率を劇的に高めます。

複数の属性を組み合わせた複合指定

一つの条件では要素を一意に特定できない場合、複数の属性を論理演算で組み合わせることができます。

例えば、「クラス名に btn を含み、かつIDが data- で始まる要素」といった指定です。

Python

# XPathで複数の条件を組み合わせる
element = driver.find_element(By.XPATH, "//button[contains(@class, 'btn') and starts-with(@id, 'data-')]")

条件を絞り込むことで、意図しない類似要素への誤操作を防ぐことが可能になります。

実務においては、複数の検索条件を組み合わせることで、「ユニークな特定条件」を作り出す工夫が求められます。

メンテナンス性を高める「Page Object Pattern」の導入

動的IDへの対策コードがスクリプトの各所に散らばってしまうと、サイトの仕様変更時に修正が困難になります。

「Page Object Pattern（POP）」を採用し、要素の特定ロジックを一箇所に集約することをおすすめします。

Python

class LoginPage:
    def __init__(self, driver):
        self.driver = driver
        # 要素の特定ロジックをプロパティとして定義
        self.login_button_locator = (By.CSS_SELECTOR, "button[id^='login_']")

    def click_login(self):
        element = self.driver.find_element(*self.login_button_locator)
        element.click()

このようにカプセル化することで、もしIDの命名規則が変わったとしても、Pageクラス内のロケーターを修正するだけで対応が完了します。

「変更に強いコード」を書くことは、動的なウェブサイトを相手にする自動化エンジニアにとって最大の防御策です。

実務で役立つデバッグと検証のテクニック

プログラムを書く前に、ブラウザのデベロッパーツール（F12キー）を活用してセレクターの有効性を検証しましょう。

コンソールタブで $x("//your/xpath") や document.querySelectorAll("your_selector") を実行することで、意図した通りに要素がヒットするか即座に確認できます。

この段階で「1つだけヒットする（Unique）」ことを確認しておくことが重要です。

複数の要素がヒットしてしまう場合は、属性を増やすか、より深い階層構造を指定して範囲を絞り込みます。

また、スクレイピング対象のサイトが時間経過やログイン状態によってIDの生成規則を変えていないか、シークレットモード等で再確認する手間も惜しまないようにしましょう。

まとめ

Seleniumで動的IDの要素を特定するためには、固定値としてのIDに依存しない柔軟なセレクター設計が不可欠です。

本記事で紹介した「XPath/CSSによる部分一致」「相対的な位置関係の利用」「テキスト基準の特定」といった手法を組み合わせることで、ほとんどの動的要素に対応できるようになります。

自動化の成否は、いかに「変化しない本質的な特徴」を捉えられるかにかかっています。

さらに、明示的待機の導入やPage Object Patternによる構造化を並行して行うことで、エラーに強くメンテナンスしやすいプロフェッショナルなスクリプトを構築できるでしょう。

不安定なセレクターによるエラーに悩まされる時間を減らし、より付加価値の高い自動化業務に注力できるよう、これらのテクニックをぜひ活用してください。