【Selenium】要素を取得するfind_elementの種類 #Python

はじめに

ブラウザ操作を自動化するライブラリのSelenium．
今回はWEBサイト上の要素を取得する，Seleniumのfind_elementメソッドについて紹介します．備忘録です．

動作環境

Python 3.12.0
Selenium 4.15.2
Microsoft Edge 119.0.2151.72 64bit

find_elementとは

Seleniumを使用する上で最も基本的なことの1つは，操作する要素を取得することです．find_elementメソッドは様々なオプションによって要素を取得します．
多くのロケーターは，ページ上の複数の要素と一致しますが，find_elementメソッドは最初に見つかった要素への参照を返します．一致する全ての要素を返したい場合は，find_elementsメソッドを使用します．

コマンド紹介

find_element(By.CLASS_NAME, "xxx")
"xxx"にclass属性名を指定することで要素を取得します．以下サンプルコードです．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# 検索テキストボックスの要素をClass属性名(class="~~~")から取得
element = driver.find_element(By.CLASS_NAME, "gLFyf")
# 検索テキストボックスに"Selenium"を入力
element.send_keys("Selenium")
# Enterキーを押下して検索を実行
element.send_keys(Keys.ENTER)

要素の取得について

要素を探す際はデベロッパーツールを使用します．ブラウザを立ち上げてF12を押すと起動できます．（下図右半分）
今回の場合はclass属性名を取得したいため，"class"を探します．後述するIDやTAG_Nameといった情報も同じ場所から取得してきます．

[実行結果]

下図の赤枠欄に”Selenium”と入力し，検索ボタンを押下します．・・・①

find_element(By.ID, "xxx")
"xxx"にid属性値を指定することで要素を取得します．以下サンプルコードです．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# 検索テキストボックスの要素をID属性値(ID="~~~")から取得
element = driver.find_element(By.ID, "APjFqb")
# 検索テキストボックスに"Selenium"を入力
element.send_keys("Selenium")
# Enterキーを押下して検索を実行
element.send_keys(Keys.ENTER)

[実行結果]

①の結果と同じため，割愛します．

find_element(By.TAG_NAME, "xxx")
"xxx"にタグ名を指定することで要素を取得します．HTMLのタグは<html>や<head>を指し，タグ名はhtmlやheadになります．下のサンプルコードでは「a」タグを取得しています．タグ名が複数ある場合は，一番初めに発見した「a」タグを取得します．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# タグ名が「a」要素の中で最初に見つけた要素を取得
element = driver.find_element(By.TAG_NAME, "a")
# 取得した要素をクリック
element.click()

[実行結果]

一番最初に発見した「a」タグは下図赤枠の「GooGleについて」．
この要素を取得してクリックを指示することで，リンク先に飛びます．

find_element(By.XPATH, "xxx")
"xxx"にxpathを指定することで要素を取得します．
要素のXPATHはデベロッパーツールから取得します．以下取得手順です．

1. F12を押してデベロッパーツールを開く．
2. XPATHを取得したい要素が記述されているコードを探す．
3. 2で見つけたコード上で右クリック．
4. 「コピー」→「XPathのコピー」を選択する．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# 検索テキストボックスの要素をXPATHから取得
element = driver.find_element(By.XPATH, '//*[@id="APjFqb"]')
# 検索テキストボックスに"Selenium"を入力
element.send_keys("Selenium")
# Enterキーを押下して検索を実行
element.send_keys(Keys.ENTER)

[実行結果]

①の結果と同じため，割愛します．

find_element(By.NAME, "xxx")
"xxx"にname属性値を指定することで要素を取得します．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# 検索テキストボックスの要素をname属性値(name="~~~")から取得
element = driver.find_element(By.NAME, "q")
# 検索テキストボックスに"Selenium"を入力
element.send_keys("Selenium")
# Enterキーを押下して検索を実行
element.send_keys(Keys.ENTER)

[実行結果]

①の結果と同じため，割愛します．

find_element(By.CSS_SELECTOR, "xxx")
"xxx"にcssセレクタを指定することで要素を取得します．
cssセレクタはcssのレイアウトを施す対象を意味し，cssセレクタには，タグ名，id属性，class属性などを指定していきます．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# 検索テキストボックスの要素をCSSセレクタから取得
element = driver.find_element(By.CSS_SELECTOR, ".gLFyf")
# 検索テキストボックスに"Selenium"を入力
element.send_keys("Selenium")
# Enterキーを押下して検索を実行
element.send_keys(Keys.ENTER)

[実行結果]

①の結果と同じため，割愛します．

find_element(By.LINK_TEXT, "xxx")
"xxx"にリンクテキストを指定することで要素を取得します．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# リンクテキスト名が"Gmail"の要素を取得
element = driver.find_element(By.LINK_TEXT, "Gmail")
# 取得した要素をクリック
element.click()

[実行結果]

リンクテキストが"Gmail"の要素を取得（下図赤枠）・・・②

find_element(By.PARTIAL_LINK_TEXT, "xxx")
"xxx"にリンクテキストの一部文字列を指定することで要素を取得します．サンプルコードではリンクテキストに"Gmail"という文字列がある場合検出される．

sample.py

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By

# EdgeDriverのパスを設定
driver_path = r"C:\Qiita\msedgedriver.exe"
# Serviceオブジェクトを介してパスを渡す
svc = Service(executable_path = driver_path)
# Edgeを起動
driver = webdriver.Edge(service = svc)
# 指定したURLに遷移する
driver.get("https://www.google.co.jp")
# リンクテキスト名が"Gmail"の要素を取得
element = driver.find_element(By.LINK_TEXT, "Gmail")
# 取得した要素をクリック
element.click()

[実行結果]

②の結果と同じため，割愛します．
PARTIAL_LINK_TEXTを使用して，特定の文字列を含むリンク要素を複数取得したい場合は，find_elementsメソッドを使用するとリスト形式で該当するすべての要素を取得できます．

おわりに

目的によって最適なオプションを使用しましょう．

参考文献

Seleniumクイックリファレンス