【Python】Seleniumのfind_elementの使い方 結局CSS_SELECTOR一本でいい

Seleniumで一番よく使うのが、要素を探すfind_elementとfind_elementsですよね、ブラウザを自動操作するときは、画面上のボタンや入力欄を「どうやって特定するか」がそのまま安定度に効いてきます

まずは要素検索の基本

まずはよくある基本の書き方です

from selenium import webdriver
from selenium.webdriver.common.by import By

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

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

このようにBy.IDやBy.NAMEなどを使って要素を探します、1件だけならfind_element、当てはまる要素を全部リストで取りたいときはfind_elementsです

でも、このByの選び方によって、コードの安定性や書きやすさが全然変わってきます

Byの種類とそれぞれの特徴

Byの種類は実は結構な数がありまして、こんな感じです

• By.ID
• By.NAME
• By.CLASS_NAME
• By.TAG_NAME
• By.LINK_TEXT
• By.PARTIAL_LINK_TEXT
• By.CSS_SELECTOR
• By.XPATH

ネットでは By.ID や By.CLASS_NAME もよく見かけますが、結論は By.CSS_SELECTOR を使っておけば間違いないです

もう一つの候補が By.XPATH ですが、CSS_SELECTORはスクレイピングで使うBeautiful Soupにも応用できますし、記述がすっきりしてわかりやすいので、こちらに軍配が上がります

結局CSS_SELECTOR一本でいい理由

CSS_SELECTORが最適な一番の理由は、他のByを全部CSS_SELECTORで代用できるところにあります

つまり、CSS_SELECTORさえ覚えてしまえば、他を使う必要がなくなるんです

ここからは、各Byを CSS_SELECTOR に書き換えるとどうなるかの一覧です、find_element(By.◯◯, ‘値’) の◯◯と値が、CSS_SELECTORならこう書けます(XPATHも参考に並べました)

ひとつ例外があって、リンクを文字(テキスト)で探す By.LINK_TEXT / By.PARTIAL_LINK_TEXT だけは、CSS_SELECTORに「文字で探す」書き方がありません、その場合は aタグを集めて for でテキスト一致させると同じことができます

# テキストが完全一致するリンク(By.LINK_TEXT 相当)
next((a for a in driver.find_elements(By.CSS_SELECTOR, 'a') if a.text == 'hoge'), None)

# テキストが部分一致するリンク(By.PARTIAL_LINK_TEXT 相当)
next((a for a in driver.find_elements(By.CSS_SELECTOR, 'a') if 'hoge' in a.text), None)

親子・兄弟もCSS_SELECTORでたどれる

CSS_SELECTORのもう一つの大きな強みが、親子要素・兄弟要素をたどって一意に指定できるところです

親子・兄弟というのは、HTMLソースで見たときの縦・横の関係です

• 親子　…　階層の深さ(入れ子の関係)
• 兄弟　…　同じ階層での横並び

例えば上の図で黄色く囲った説明文2ですの要素を取りたいとき、クラス名だけで指定すると

driver.find_element(By.CLASS_NAME, "description")

上にある「説明文です」の方を先に拾ってしまいます(n番目で指定する手もありますが、ややこしくなるので割愛します)

うまく取るには、指定が一意になるよう親要素からたどります、どこまで丁寧に書くかですが

• ‘.younger .description’
• ‘.younger > .card > .description’
• ‘div.younger > div.card > p.description’

などで取れます

ここで使った スペース(子孫)や >(直下の子)といった結合子は、隣接(+)や兄弟(~)も含めて種類があります、結合子の一覧と使い分けは別記事「CSSセレクタの書き方」の結合子の節にまとめたので、引き出しを増やしたいときはどうぞ

※このページの下部に同じ画像とサンプルHTMLを置いてあるので、実際に試してみてください

開発者ツールでセレクタを下書きする

慣れればソースを見て起点の要素と狙った要素までの道のりが判断できるようになりますが、最初のうちは開発者ツール(DevTools)に下書きさせると早いです

右クリックのCopy → Copy selectorでセレクタを取得できます、ただそのまま使うには長くて壊れやすいことも多いので、下書きとして受け取って自分で短く整えるのがおすすめです

find_elementでよくあるエラーと回避方法

Seleniumを触っているとよく出会うのが NoSuchElementException や ElementNotInteractableException です

要素が見つからなかったり、まだ読み込みが終わっていないのが原因です

例えば画面の文字を取得するとき、素直に書くとこうなりますが

hoge = driver.find_element(By.CSS_SELECTOR, '#hoge').text

ただ、これだと指定した要素が見つからなかったときにエラーで止まってしまいます

それを防ぐには、次の2パターンのどちらかがおすすめです

# 10秒待っても要素が見つからないエラーをキャッチする
try:
    elm = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, '#hoge')))
    hoge = elm.text
except TimeoutException:
    print('#hoge が見つかりませんでした')
except Exception:
    print('予期せぬエラーが発生しました')

# 要素が見つからないとNoneを返す
elm = next((e for e in driver.find_elements(By.CSS_SELECTOR, '#hoge')), None)
if elm:
    hoge = elm.text
else:
    print('#hoge が見つかりませんでした')

やり方は違いますが、どちらも「まず要素を検索」してから「目的のアクションを実行」することでエラーを防いでいます

このやり方なら、文字の取得だけでなく、文字入力やクリックにもそのまま流用できます

1つ目の WebDriverWait は奥が深くて、何を待つか(expected_conditions)の選び方で安定感が変わります、待ちでつまづいたら別記事「Seleniumで要素を確実に待つ方法」に詳しくまとめたので、あわせてどうぞ

あとがき

基礎の基礎に見える find_element でも、Byの選び方やエラー回避まで含めると結構奥が深いです

少しずつ理解を深めて、Seleniumを活用していきたいですね

あわせて読みたい記事も置いておきます

• セレクタの書き方を深掘りしたい … CSSセレクタの書き方
• 要素の待ち方で困っている … Seleniumで要素を確実に待つ方法
• ExcelのVBAで同じことをやりたい … SeleniumVBA実践コード集

最後に、練習に使えるHTMLを置いておきますので、ご自由にどうぞ

サンプルHTML

下のサンプルはこのページに実際に表示されています、開発者ツールで構造を見ながら、上で紹介したセレクタを試してみてください

📚 Python自動化の独学に効く本PR

退屈なことはPythonにやらせよう 第3版

Al Sweigart

Amazonで見る楽天で見る

Pythonクローリング&スクレイピング 増補改訂版

加藤耕太

Amazonで見る楽天で見る

シゴトがはかどる Python自動処理の教科書

クジラ飛行机

Amazonで見る楽天で見る

私のおすすめからランダムで3冊を表示しています