【テスト自動化】Python selenium(テキスト編集、キー入力、プルダウン、Fullキャプチャ)Chrome操作

皆さん、こんばんは。
今回は、Webブラウザでのテキスト編集、キー入力、プルダウン操作、スクリーンキャプチャについてご紹介したいと思います。
以下テストページを使用して、ご紹介していきたいと思います。

Test Page_No1

また、今回は、Chromeの Driverを利用して、各操作をご紹介したいと思います。

■記事内リンク

・事前準備
・テキスト編集
・キー入力
・プルダウン操作
・スクリーンキャプチャ

□事前準備

◇ipynbファイルの作成

Anacondaを起動後、Jupyterlabを起動し、File⇒New⇒Notebookを選択し、新規ファイルを作成します。
その後、Select Kernelのダイアログが表示されますので、「Python 3」を選択し、「Select」を選択します。

「Untitled.ipynb」が作成されますので、タブを右クリック⇒「Rename Notebook…」を選択し、名前を指定します。
私の場合、以下のように設定しました。
「Jupyterlab_Web_operation_Chrome.ipynb」

◇各ライブラリのインポート

以下を表記し、Shift+Enter(以降実行)で実行し、ライブラリをインポートします。
#インポート
import selenium
from selenium import webdriver
import time
print("準備：inport OK")
time.sleep(3)

◇Chromeドライバ設定

続いて、使用するWebドライバを指定します。
Webドライバの設定については、過去の記事で紹介していますので、ご参考頂ければと思います。

【テスト自動化】Python selenium（Windows/Anaconda/各Driver）の環境構築設定

私の場合、以下のように設定しています。
#Chrome Driver設定
driver=webdriver.Chrome(executable_path="C:\\Users\\sinsu\\WebDrivers\\ChromeDriver\\Ver89\\chromedriver.exe")
time.sleep(3)
driver.maximize_window()
time.sleep(3)

print("Chrome Driver OK")
time.sleep(1)

「driver.maximize_window()」でウィンドウサイズを最大化しています。

◇テストページ遷移

テストページに遷移しましょう。
「get」メソッドを使用し、テストページに遷移します。

#テストページ遷移
driver.get('https://susakiworks.com/testwork/testpage/test_page_no1/')
time.sleep(3)

print("サイトページに遷移しました。")
time.sleep(1)

以下ページに遷移できたらOKです。

□テキスト編集

◇テキストボックスへフォーカス

テストページに遷移した後は、テキストボックスへフォーカスしましょう。

※フォーカスについて
前回のFirefox driverを使用した以下記事で、画面内に該当の要素が無い場合、エラーとなる旨を記載致しました。

こちらについてですが、もう少し深掘りしたところ、「ActionChains」ライブラリのmove_to_elementで、画面外にある要素にフォーカスできるのは、ChromeDriver、EdgeDriverとなっていました。
FirefoxDriverのみ画面内に要素が無いと要素へフォーカスできないことを確認致しました。

私は、普段ChromeDriverを使用していたので、こちらの違いに気づきませんでした。
「画面外の要素にフォーカス」

FirefoxDriverを使用される際は、お気を付けください。
（尚、Chick操作で代用は可能です。）

今回は、ChromeDriverを使用していますので、「ActionChains」を使用した画面外の要素へのフォーカスは可能となります。
フォーカスのターゲットは、「名前」のテキストボックスと致します。

「テキストボックス入力　チェック」の名前のテキストボックスを右クリック⇒「検証」を選択し、Chromeインスペクタの「Elements」で、要素が「name」であることを確認します。

以下を記述して、名前のテキストボックスにフォーカスしましょう。
・インポート
#ActionChainsインポート
from selenium.webdriver.common.action_chains import ActionChains
time.sleep(3)

print("ActionChainsをインポートしました")
time.sleep(1)

・フォーカス実行
#「名前」のテキストボックスにフォーカス
NameTextbox = driver.find_element_by_name("namae")
​
actions = ActionChains(driver)
actions.move_to_element(NameTextbox).perform()
time.sleep(3)
​
print("名前テキストボックスにフォーカスしました。")
time.sleep(1)

以下のように、画面の表示位置が変わればOKです。

◇テキスト入力（復習）

テキスト入力していきます。
こちらは、以前ご紹介した「send keys」メソッドを使用します。
以下を入力し、実行すると、名前のテキストボックスに「Susaki」が入っていればOKです。

#名前を入力します。
NameTextbox.send_keys("Susaki")
time.sleep(3)

print("名前テキストボックスに入力しました。")
time.sleep(1)

◇テキスト削除

テキストボックスで、入力されているテキストを削除します。
「Clear」メソッドを使用します。
すでにテキストボックスに入力されているテキストを削除できますので、「send keys」と組み合わせて、入力フォームの編集等に利用できます。
#テキストボックスの文字をクリアします。
NameTextbox.clear()
time.sleep(3)

print("テキストをクリアしました。")
time.sleep(1)

実行すると、テキストボックスのテキストが削除されます。

□キー入力

続いて、キーを入力します。
Ctrl、shift、Alt、Enterなどの修飾キー（モディファイヤキー）を入力することができます。
ここでは、キーのみを押した場合、キーを組み合わせた場合の操作について、ご紹介いたします。

◇インポート

キー入力を行う場合、「Key」ライブラリをインポートします。
以下を入力し、インポートします。

#キー入力のインポート
from selenium.webdriver.common.keys import Keys
time.sleep(3)

print("Keyライブラリをインポートしました。")
time.sleep(1)

◇キー入力

・キーのみ
キーのみ操作する場合をご紹介いたします。
先ほど名前のテキストボックスに、テキストを入力した際、テキストボックスにフォーカスがある状態となっています。
「TABキー」を押して、テキストボックスからフォーカスを外すようにしたいと思います。

まずは再度名前ボックスにテキストを入力してみます。
#テキスト再入力
NameTextbox.send_keys("Susaki")
time.sleep(3)

print("名前テキストボックスに再入力しました。")
time.sleep(1)

その後、「tab」キーを入力し、次のテキストボックス「ニックネーム」にフォーカスします。
#TABキーを入力
NameTextbox.send_keys(Keys.TAB)
time.sleep(3)

print("TABキーを入力しました。")
time.sleep(1)

・キーと組み合わせ
キーとの組み合わせとしまして、「Ctrlキー」とクリックした場合についてご紹介します。
「test_page_no1」のページで、「テストページ」をCtrlキーを押しながらクリック操作を行ってみたいと思います。

「テストページ」のリンクを右クリック⇒「検証」で、要素を確認します。
リンクテキストが「テストページ」ですので、こちらをCtrl+クリックし、別タブでリンク先を開きたいと思います。

以下のように記述します。
actionChainを「actions」とし、Key_downで「CONTROL」キーを押、「TestPage」のリンクをクリックします。

#Ctrlキーでリンクをクリック
TestPage = driver.find_element_by_link_text("テストページ")

actions = ActionChains(driver)
actions.key_down(Keys.CONTROL)
actions.click(TestPage)
actions.perform()
time.sleep(3)

print("リンクを別タブで開きました")
time.sleep(1)

以下のようにリンクページがタブで開けばOKです。

・その他キーの操作について
キーの操作は、今回の「Key_down」の他、「Key_up」などもあります。
また、Keyの一覧としてまとめてあるページがありました。
Key操作を行いたい場合は、以下ページも参考頂くと、キー操作の幅が広がると思います。
https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/Keys.html

□プルダウン操作

プルダウン操作について、ご紹介いたします。
同テストページ内に、プルダウン操作確認用の項目がありますので、そちらを使用してご紹介したいと思います。

◇インポート

プルダウン操作を行う場合、「select」を使用します。
以下のようにインポートしましょう。
#Selectインポート
from selenium.webdriver.support.ui import Select

time.sleep(3)

print("Selectをインポートしました。")
time.sleep(1)

◇プルダウン選択

プルダウン項目を選択してみましょう。

・プルダウン要素を確認
まずはプルダウンの要素を確認してみます。
プルダウンの要素を確認すると、以下であることを確認します。

pulldown = driver.find_element_by_name('PullDown')
と要素を特定します。

・プルダウンの要素を選択
プルダウン内の要素を確認してみましょう。
以下のように季節ごとにValueが用意されていますので、好きな季節を選んでみましょう。

私は、夏が好きなので、以下のように選んでみました。

#プルダウンから季節を選択
pulldown = driver.find_element_by_name('PullDown')
Select(pulldown).select_by_value('summer')

time.sleep(3)

print("夏を選びました。")
time.sleep(1)

実行後、プルダウンの要素が切り替わっていればOKです。

□スクリーンキャプチャ

最後にスクリーンキャプチャについてご紹介いたします。

◇表示画面をキャプチャ

単純にスクリーンキャプチャを実施する場合は、以下コマンドで実行することができます。
（）内でファイル名を指定して保存することができます。

#スクリーンキャプチャ（表示している画面のみ）
driver.get_screenshot_as_file('test_page_no1.png')
time.sleep(3)

print("スクリーンキャプチャしました。")
time.sleep(1)

実行すると、「Jupyterlab_Web_operation_Chrome.ipynb」と同じディレクトリにキャプチャが保存されます。
（私の場合は、ユーザーフォルダの直下に保存されました。）

◇ページ全体をキャプチャ

ページ全体のキャプチャについてですが、すでに色々な方がブログが動画でページ全体のキャプチャ方法をご紹介されています。
しかし、Pythonに精通されている方、開発経験がある方であれば、「ヘッドレスモード」でのキャプチャ方法や、座標を指定してのキャプチャをされていますので、コードが結構複雑だったりします。

もっとシンプルにできないのかと探していたところ、以下ページを見つけました。
https://pypi.org/project/Selenium-Screenshot/

こちらは、スクリーンキャプチャに特化したライブラリとなっています。
「Release history」を確認すると、2018年ごろにリリースされているようです。

早速試してみましょう。

・ライブラリインストール
画面上部のコピーボタンを押して、「pip install Selenium-Screenshot」をコピーしましょう。

その後、Jupyterlabのセル内に記述し、実行します。
以下のように「Successfully」と表示されればOKです。

・インポート
「Selenium-Screenshot」をインポートしましょう。
以下のように記述し、インポートします。
#Screen-shotインポート
from Screenshot import Screenshot_Clipping

time.sleep(3)

print("optionsをインポートしました。")
time.sleep(1)

・フルスクリーンショット
サンプルの記述を基に、以下のようにコードを記述し実行してみました。

#画面全体をキャプチャ
ob=Screenshot_Clipping.Screenshot()
url = "https://susakiworks.com/testwork/testpage/test_page_no1/"
driver.get(url)
img_url=ob.full_Screenshot(driver, save_path=r'.', image_name='test_page_no1_fullScreen.png')
print(img_url)

するとい、以下のようにキャプチャができました。
しかし、画面右側の内容が見切れているようです。

※上記は、ノートPCのsurfaceで行った場合に発生しているようです。
デスクトップで実行してみると、問題なく右側も表示されました。

driver.maximize_window()
time.sleep(3)

ob=Screenshot_Clipping.Screenshot()

TestURL = "https://susakiworks.com/testwork/testpage/test_page_no1/"
driver.get(TestURL)
time.sleep(3)
img_url=ob.full_Screenshot(driver, save_path=r'.', image_name='desktop_screen_capture.png')

他にも、Yahooのトップページも取得してみました。
よくみると、ページ下部が見切れています。
こちらは、「Selenium-Screenshot」の制限事項のようです。

ノートPCのSurfaceで右側が取得できない件は、別途調査したいと思います。

■最後に

今回は、Chrome driverを使用して、「テキスト編集」、「キー入力」、「プルダウン操作」、「スクリーンキャプチャ」についてご紹介いたしました。
次回もWeb操作について、ご紹介していきたいと思います。

最後まで見て頂き、ありがとうございました。

サイトトップへ
https://susakiworks.com/

Selenium実践入門 ――自動化による継続的なブラウザテスト WEB+DB PRESS plus

Pythonをおぼえたらブラウザ操作を自動化しよう: Seleniumで操作してBeautifulSoupで解析をする