🐤

Seleniumの使い方　第４回　クリック自動化などelementの操作（python×Microsoft Edge）

2025/05/13に公開

こんにちは、星杜なぎさです

今回は、seleniumで文字入力やクリックを行う方法について学びます。
環境構築がまだの人は、以下の記事で準備してから本記事を読まれるとよいでしょう

https://zenn.dev/hoshinagi1219/articles/b61f220e0908c5

 1. はじめにSeleniumは、Webブラウザの操作を自動化するためのツール
オープンソースなので、無料で利用可能
WebスクレイピングやRPA（Robotic Process Automation）などに活用できる

 1.1 この記事についてSeleniumでできることを端的に表したサンプルコードを記載した
Chromeを使用した例が（公式サイト含め）多かったため、Microsoft Edgeでの使い方をまとめる

企業などの方針でChromeがインストールできない人でも大丈夫です！

 1.2 対象読者プログラム言語（特にpython）が多少読める、書ける
PCの基本操作（Drag and Dropなど）を知っている
Webブラウザの基本操作を知っている

 1.3 動作環境PC
OS：Windows 11 Home

python : 3.12.5
selenium : 4.31.0


 2. とりあえず、動かしてみようselenium公式にWeb-formのサンプルサイトがあるため、これを使って手っ取り早く動作を確認できるサンプルプログラムを作成した

https://www.selenium.dev/selenium/web/web-form.html

 2.1 プログラム実行時の様子以下の操作を行っています。
URLへアクセス
要素の属性取得（h1タグ）
Input Textのフォームに「hogehoge」と入力
ハイパーリンクの遷移先URLの取得
checkboxを順番に選択（＋要素の状態取得）
submitボタンをクリック（＋ボタン要素の画像を保存）



 2.2 プログラムサンプルfrom time import sleep
from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By

"""
事前にEdgeのWebDriverを入手しておくこと
"""
SERVICE = Service("./edgedriver_win64/msedgedriver.exe")  # exeのPATH
TARGET_URL = "https://www.selenium.dev/selenium/web/web-form.html"

try:
    # 1.下準備(URLへアクセス、ウィンドウの最大化)
    driver = webdriver.Edge(service=SERVICE)
    driver.maximize_window()  # windowを最大化する
    driver.get(TARGET_URL)  # URLへアクセスする
    sleep(1)

    # 2.要素の属性
    h1_text = driver.find_element(By.XPATH, "/html/body/main/div/div/div/h1")
    print("=== h1 ===\n", 
          "type : ", type(h1_text), "\n", # 型の確認
          "tag_name : ", h1_text.tag_name, "\n",  # タグ名
          "text : ", h1_text.text, "\n",  # 表示テキスト
          "rect : ", h1_text.rect, "\n",  # 表示されている範囲の矩形情報
          'value_of_css_property("font-size") : ', h1_text.value_of_css_property("font-size")  # cssのプロパティを取得
          )

    # 3.文字を入力する
    text_input = driver.find_element(By.ID, "my-text-id")
    text_input.send_keys("hogehoge")
    sleep(1)

    # 4. ハイパーリンクの遷移先URLの取得
    hyperlink_text = driver.find_element(By.XPATH, "/html/body/main/div/form/div/div[1]/div/a")
    print("\n=== hyperlink_text ===")
    print('.get_attribute("href") : ', hyperlink_text.get_attribute("href"))  # 引数で指定した属性の値を取得

    # 5.チェックボックスを順番にクリック
    checkbox_list = driver.find_elements(By.XPATH, "/html/body/main/div/form/div/div[2]/div[1]/label")
    print("=== checkbox(list) ===\n", type(checkbox_list), checkbox_list)
    for checkbox in checkbox_list:
        print("\n=== checkbox ===\n", 
              ".is_displayed() : ", checkbox.is_displayed(), "\n",  # 表示されているか？
              ".is_enabled() : ", checkbox.is_enabled(), "\n",  # 活性化状態か？
              ".is_selected() : ", checkbox.is_selected(),  # 選択された状態か？
              )
        sleep(1)
        checkbox.click()  # チェックボックスをクリックする
        sleep(1)

    # 6. ボタンを押す
    submit_button = driver.find_element(By.XPATH, '/html/body/main/div/form/div/div[2]/button')  # 要素を取得
    submit_button.screenshot("submit_button.png")  # 要素の画像を保存
    submit_button.click()  # submitボタンを押す
    sleep(1)

finally:
    driver.quit()

print("conplete run!!")
実行した際に、属性やメソッドの返り値が、コンソール上に表示されます


 2.3 XPathの調べ方実はこっちがメインなのかもしれない。

「find_elementでID属性やXPathを指定して取得」と言われますが、

そもそもXPathはどうやって調べるのか？を具体的な手順とともに解説していきます。
Microsoft Edgeの場合、以下の手順でXPathやID属性を取得できます。
Web要素上にマウスカーソルを合わせて右クリック
[開発者ツールで調査する]をクリック
（１のWeb要素がハイライトされた状態で、開発者ツール（画面右側）が立ち上がる
開発者ツール上で、XPATHを調べたいWeb要素の上で右クリック
[Copy]→[Copy XPath]の順にクリック
「ctrl + V」でメモ帳などにペーストする
ID属性で特定できるかを確認する
//*[@id="my-text-id"] など@idで直接要素を指定できる場合

find_element(By.ID, "my-text-id")のようにID属性で指定
その他の場合(/html/body/main/div/div/div/h1など、XPathがfull Pathの場合)

find_element(By.XPATH, "/html/body/main/div/div/div/h1")のようにXPathで指定

以下、画像での解説
Web要素上にマウスカーソルを合わせて右クリック
[開発者ツールで調査する]をクリック

（１のWeb要素がハイライトされた状態で、開発者ツール（画面右側）が立ち上がる

開発者ツール上で、XPATHを調べたいWeb要素の上で右クリック
[Copy]→[Copy XPath]の順にクリック

「ctrl + V」でメモ帳などにペーストする

ID属性で特定できるかを確認する
//*[@id="my-text-id"] など@idで直接要素を指定できる場合



find_element(By.ID, "my-text-id")のようにID属性で指定


その他の場合(/html/body/main/div/div/div/h1など、XPathがfull Pathの場合)



find_element(By.XPATH, "/html/body/main/div/div/div/h1")のようにXPathで指定

1. はじめに

1.1 この記事について

1.2 対象読者

1.3 動作環境

2. とりあえず、動かしてみよう

2.1 プログラム実行時の様子

2.2 プログラムサンプル

2.3 XPathの調べ方

Discussion