🐤

Seleniumの使い方　第２回　WebFormの自動操作サンプル（python×Microsoft Edge）

2025/05/08に公開

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

前回、第1回で環境構築をした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 プログラム実行時の様子こんな感じで自動的にWeb要素を操作してくれる


 2.2 サンプルプログラムseleniumが用意しているWeb formのサイトで、Web UIを自動操作するプログラム
15～17行目は、ファイルのアップロードで絶対PATHを記載する必要があったため、

標準ライブラリのpathlibを用いた空のファイルを作成を行っている
from time import sleep
from pathlib import Path
from selenium import webdriver
from selenium.webdriver.edge.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.support.select import Select
from selenium.webdriver import ActionChains
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

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

SEND_FILE_PATH = Path("send_example.txt")  # 4.ファイルのアップロードで使用
SEND_FILE_PATH.touch(exist_ok=True)  # 空のファイルを作成
ABSOLUTE_PATH = str(SEND_FILE_PATH.absolute())  # 絶対PATHを取得しstr型に変換

try:
    driver = webdriver.Edge(service=SERVICE)
    driver.get(TARGET_URL)  # URLへアクセスする
    driver.maximize_window()  # windowを最大化する
    sleep(5)  # ブラウザが開いている様子を確認する

    # 0.表示文字の取得
    e_h1 = driver.find_element(By.XPATH, "/html/body/main/div/div/div/h1")  # h1タグの要素を取得
    print("h1タグの情報を取得\n",
          ".text : ", e_h1.text, "\n", # 要素の表示テキストを取得
          ".tag_name : ", e_h1.tag_name, "\n",  # 要素のタグ名を取得
          ".rect : ", e_h1.rect, "\n",  # 要素の矩形情報を取得
          ".location : ", e_h1.location, "\n", # 要素の表示座標を取得
          "font_size : ", e_h1.value_of_css_property("font-size"), "\n"  # CSSプロパティの取得
         )

    # 1.入力フォーム
    e_input_text = driver.find_element(By.ID, "my-text-id")  # Text inputの下のinput要素
    e_input_text.send_keys("hoge")

    e_input_password = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[1]/label[2]/input")  # Passwordの下のinput要素
    e_input_password.send_keys("moge")

    e_input_password = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[1]/label[3]/textarea")  # Textareaの下のinput要素
    e_input_password.send_keys("piyo")

    # 2.要素の状態の取得
    e_disabled_input = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[1]/label[4]/input")  # Disabled inputの下のinput要素
    print("要素の情報\n",
          ".is_displayed() : ", e_disabled_input.is_displayed(), "\n",  # 要素が表示されているか？
          ".is_enabled() : ", e_disabled_input.is_enabled(), "\n",  # 要素が有効か？
          ".get_attribute() : ", e_disabled_input.get_attribute("name"), "\n"  # name属性の値を取得
          )

    # 3.ドロップダウンメニューの操作
    # from selenium.webdriver.support.select import Select
    e_dropdown = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[2]/label[1]/select")  # Dropdown (select)の下のselect要素
    select_obj = Select(e_dropdown)
    for option in select_obj.options:
        text = option.text # 選択肢のテキスト
        select_obj.select_by_visible_text(text)  #  表示されている文字列で、選択肢を選択
        sleep(1)

    # 4.ファイルのアップロード
    e_fileinput = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[2]/label[3]/input")  # File inputの下のselect要素
    e_fileinput.send_keys(ABSOLUTE_PATH)  # 絶対PATHで記載すること！

    # 5.ボタンクリック
    e_checkbox1 = driver.find_element(By.ID, "my-check-1")  # Checked checkbox
    e_checkbox1.click()
    sleep(1)
    e_checkbox2 = driver.find_element(By.ID, "my-check-2")  # Default checkbox
    e_checkbox2.click()
    sleep(1)
    e_radio2 = driver.find_element(By.ID, "my-radio-2")  # Default radio
    e_radio2.click()
    sleep(1)
    print("チェックボックスの状態\n", 
          "e_checkbox1.is_selected() : ", e_checkbox1.is_selected(), "\n",  # 要素が選択されているか？
          "e_checkbox2.is_selected() : ", e_checkbox2.is_selected(), "\n",  # 要素が選択されているか？
          "e_radio2.is_selected() : ", e_radio2.is_selected(), "\n",  # 要素が選択されているか？
          )

    # 6.color picker
    e_color_picker = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[3]/label[1]/input")  # Color pickerの下の要素
    e_color_picker.send_keys("#C0FFEE")  # カラーコード(#C0FFEE)を文字列として入力
    sleep(1)

    # 7.slider
    # from selenium.webdriver import ActionChains
    e_slider = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[3]/label[3]/input")  # Example rangeの下の要素
    ActionChains(driver)\
        .drag_and_drop_by_offset(e_slider, 100, 0)\
        .perform()  # 操作を実行
    sleep(1)
    
    # 8.date picker
    e_date_picker = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[3]/label[2]/input")  # Date pickerの下の要素
    e_date_picker.send_keys("12/19/1994")  # カラーコードを文字列として入力する
    sleep(1)

    # 9.スクリーンショット
    driver.get_screenshot_as_file('9_screenshot_image.png')  # 画像ファイルでSCを保存

    # 10.ボタンを押下
    e_submit = driver.find_element(By.XPATH, 
        "/html/body/main/div/form/div/div[2]/button")  # Submitボタンの要素
    e_submit.click()
    sleep(1)

    # 11.遷移先のページに特定の要素が表示されるまで、５秒間待機
    # from selenium.webdriver.support import expected_conditions as EC
    # from selenium.webdriver.support.ui import WebDriverWait
    element = WebDriverWait(driver, 5).until(
                  EC.visibility_of_element_located((By.ID, "message"))
              )
    print(type(element))  # 返り値は、class WebElement
    if element.text == "Received!":
        print("正常に遷移しました\n")
    else:
        assert "エラーが発生しました(Submitボタン押下後、正常に画面が遷移しませんでした)\n"

    # 12.遷移後の状態を確認
    print("遷移後のサイトの状態\n"
          ".current_url : ", driver.current_url, "\n" # ?以降に各入力値の状態が含まれている
          ".page_source", driver.page_source  # htmlのソースを取得
          ) 

    sleep(3)  # ブラウザが開いている様子を確認する
finally:
    driver.close()
    driver.quit()

print("conplete run!!")

 2.3 出力結果「9_screenshot_image.png」という名称で、下記の画像のスクショが保存されます

elementの属性については、出力を参照のこと

driverのcurrent_urlには、各要素に入力された文字列が格納されていることを確認できる

（#は%23, /は%2Fで記載されている）
my-text=hoge&
my-password=moge&
my-textarea=piyo&
my-readonly=Readonly+input&
my-select=3&
my-datalist=&
my-file=1_selenium_tutorial.py&
my-check=on&my-radio=on&
my-colors=%23c0ffee&
my-date=12%2F19%2F1994&
my-range=9&my-hidden=
driverのpage_sourceには、htmlのソースコードそのものが格納されている

beautiful_soup4等と併用することで、要素が指定通りかなどの確認に使える


 3. まとめseleniumを用いた基本的な自動操作を体験できるサンプルコードを作成した
color pickerやdate pickerの指定方法の例が広告まみれの個人サイトが多く会社でうまく検索できなかったため、自分でまとめた
driverやelementのメソッド解説よりも、実際に動かしたほうが身に付くと感じた

 参考URLWeb form

https://www.selenium.dev/selenium/web/web-form.html
Actions API _ Selenium.html

https://www.selenium.dev/documentation/webdriver/actions_api/
Working with select list elements _ Selenium.html

https://www.selenium.dev/documentation/webdriver/support_features/select_lists/#select-option

1. はじめに

1.1 この記事について

1.2 対象読者

1.3 動作環境

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

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

2.2 サンプルプログラム

2.3 出力結果

3. まとめ

参考URL

Discussion