Selenium 要素の特定

Selenium において、要素の特定は自動テストと Web 操作の核心です。

要素を特定することで、クリック、テキスト入力、属性取得などの操作を行うことができます。

要素特定の基本概念

要素の特定とは？

要素の特定とは、何らかの方法で Web ページ内の特定の要素（ボタン、入力ボックス、リンクなど）を見つけることです。

なぜ要素の特定が必要なのか？

自動操作では、対象の要素を正確に見つけて初めて、クリックや入力などの後続の操作を実行できます。

要素特定の一意性。

特定した要素が一意であることを確認し、誤った要素を操作しないようにします。

特定方法

Selenium には複数の要素特定方法が用意されており、よく使われるものは次のとおりです：

1、ID による特定

方法：find_element(By.ID, "id_value")

説明：要素の id 属性による特定。

from selenium.webdriver.common.by import By

element = driver.find_element(By.ID, "username")

2、Name による特定

方法：find_element(By.NAME, "name_value")

説明：要素の name 属性による特定。

element = driver.find_element(By.NAME, "password")

3、Class Name による特定

方法：find_element(By.CLASS_NAME, "class_name")

説明：要素の class 属性による特定。

element = driver.find_element(By.CLASS_NAME, "submit-btn")

4、Tag Name による特定

方法：find_element(By.TAG_NAME, "tag_name")

説明：要素のタグ名による特定（<div>、<input> など）。

 element = driver.find_element(By.TAG_NAME, "input")

5、CSS セレクターによる特定

方法：find_element(By.CSS_SELECTOR, "css_selector")

説明：CSS セレクターによる要素の特定。

 element = driver.find_element(By.CSS_SELECTOR, "input#username")

6、XPath による特定

方法：find_element(By.XPATH, "xpath_expression")

説明：XPath 式による要素の特定。

 element = driver.find_element(By.XPATH, "//input[@id='username']")

7、Link Text による特定

方法：find_element(By.LINK_TEXT, "link_text")

説明：リンクのテキスト内容による特定（<a> タグに適用）。

 element = driver.find_element(By.LINK_TEXT, "Click Here")

8、Partial Link Text による特定

方法：find_element(By.PARTIAL_LINK_TEXT, "partial_link_text")

説明：リンクの部分的なテキスト内容による特定。

 element = driver.find_element(By.PARTIAL_LINK_TEXT, "Click")

要素特定のベストプラクティス

一意な属性を優先的に使用する：

  • できる限りid、nameなどの一意な属性で要素を特定します。

動的属性を避ける：

  • 要素の属性が動的に生成される場合（ランダム ID など）、これらの属性を直接使用して特定することを避けます。

相対位置特定を使用する：

  • XPath または CSS セレクターを要素の階層関係と組み合わせて特定します。

待機メカニズムを追加する：

  • 暗黙的待機または明示的待機を使用して、要素の読み込みが完了してから操作を実行します。

よく使われる要素特定方法

Selenium には複数の要素特定方法が用意されており、各方法は異なるシナリオに適しています。以下はよく使われる要素特定方法です：

1、find_element_by_id

find_element_by_idは要素のid属性で要素を特定します。id属性は HTML 内で一意であるため、この方法は通常最も直接的で効率的です。

例

element = driver.find_element_by_id("element_id")

2、find_element_by_name

find_element_by_nameは要素のname属性で要素を特定します。name属性はフォーム要素で非常に一般的です。

例

element = driver.find_element_by_name("element_name")

3、find_element_by_class_name

find_element_by_class_nameは要素のclass属性で要素を特定します。class属性は通常スタイル定義に使用され、複数の要素が同じものを共有する場合があります。class。

例

element = driver.find_element_by_class_name("element_class")

4、 find_element_by_tag_name

find_element_by_tag_nameは要素のタグ名で要素を特定します。タグ名は例えばdiv、input、aなどです。

例

element = driver.find_element_by_tag_name("tag_name")

5、 find_element_by_css_selector

find_element_by_css_selectorは CSS セレクターで要素を特定します。CSS セレクターは非常に柔軟で、複数の条件を組み合わせて使用できます。

例

element = driver.find_element_by_css_selector("css_selector")

6、 find_element_by_xpath

find_element_by_xpathは XPath 式で要素を特定します。XPath は XML ドキュメント内でノードを特定するための言語であり、非常に強力です。

例

element = driver.find_element_by_xpath("xpath_expression")

7、 find_element_by_link_text

find_element_by_link_textはリンクのテキスト内容で要素を特定します。適用されるのは<a>タグの位置特定です。

例

element = driver.find_element_by_link_text("link_text")

8、 find_element_by_partial_link_text

find_element_by_partial_link_textはリンクの部分的なテキスト内容で要素を特定します。テキストが長い場合や部分一致のシナリオに適しています。

例

element = driver.find_element_by_partial_link_text("partial_link_text")

複数の要素を特定する（find_elements）

単一の要素だけでなく、複数の要素を特定する必要がある場合があります。Selenium はfind_elementsメソッドを提供しており、要素のリストを返します。

例

elements = driver.find_elements_by_class_name("element_class")

find_elementsメソッドとfind_elementメソッドの使用法は同じですが、返されるのはリストです。

動的要素の特定テクニック

Web アプリケーションでは、一部の要素の属性が動的に生成され、ページをリフレッシュするたびに変化します。このような動的要素を扱う場合は、以下のテクニックを使用できます：

1、相対パスを使用する

XPath または CSS セレクターでは、絶対パスではなく相対パスを使用します。相対パスは、要素の位置の変化による特定失敗を防ぐことができます。

例

element = driver.find_element_by_xpath("//div[@class='dynamic_class']")

2、部分一致を使用する

動的に生成されたid 或 classに対しては、部分一致の方法で要素を特定できます。例えば、contains関数を使用します。

例

element = driver.find_element_by_xpath("//div[contains(@id, 'dynamic_part')]")

3、待機メカニズムを使用する

動的要素はすぐにページに表示されない場合があるため、Selenium の待機メカニズムを使用して要素の出現を待つことができます。

例

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "dynamic_id"))
)

4、JavaScript を使用した特定

場合によっては、JavaScript を実行して動的要素を特定できます。

例

element = driver.execute_script("return document.querySelector('dynamic_selector');")

総合サンプル

Selenium は豊富な要素特定方法を提供しており、これらの方法を習得することでページ要素を効率的に特定できます。

動的要素に対しては、相対パス、部分一致、待機メカニズム、JavaScript による特定などのテクニックを柔軟に活用することで、自動テストの安定性と信頼性を大幅に向上させることができます。

以下は、複数の特定方法を使用して要素を見つけ、操作を実行する方法を示す完全なサンプルです：

例

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service as ChromeService

# ブラウザを起動
service = ChromeService(executable_path="./chromedriver")
driver = webdriver.Chrome(service=service)

# Webページを開く
driver.get("https://www.example.com")

# ID で入力ボックスを特定し、テキストを入力
username = driver.find_element(By.ID, "username")
username.send_keys("testuser")

# Name で入力ボックスを特定し、テキストを入力
password = driver.find_element(By.NAME, "password")
password.send_keys("password123")

# CSS セレクターでボタンを特定してクリック
submit_button = driver.find_element(By.CSS_SELECTOR, "button.submit-btn")
submit_button.click()

# XPath でリンクを特定してクリック
link = driver.find_element(By.XPATH, "//a[text()='Click Here']")
link.click()

# ブラウザを閉じる
driver.quit()
その他の拡張