【テスト自動化】Python selenium(日時入力、カラー選択、アラート、ダイアログ、iframe）操作

皆さん、こんばんは。
今回は、日付入力、カラー選択、アラート、ダイアログ、iframe操作についてご紹介したいと思います。

テストページは、テストページ03を使用して、ご紹介していきたいと思います。

・マウス系操作テストページ
https://susakiworks.com/wp-content/uploads/2021/03/TestPage03.html

また、今回も前回と引き続き、Chrome Driverを使用して各自動化の操作をご紹介していきたいと思います。

■記事内リンク

・事前準備
・日付入力
・カラー選択
・アラート操作
・ダイアログ操作
・フレーム操作

□事前準備

◇ipynbファイル作成

Anacondaを起動後、JupyterLabを選択しましょう。
JupyterLab起動後、画面左上のメニュー「File」⇒「New」⇒「Notebook」を選択します。
Select Kernelで「Python 3」を選択し、作成したipynbファイルのタブを右クリック後、
Rename Fileを選択し、ファイル名を設定します。
今回以下のようにファイル名を設定しました。
Jupyterlab_Web_operation_Chrome02.ipynb

◇インポート

selenium、webdriver、timeをインポートしましょう。
以下を入力しインポートします。
#インポート
import selenium
from selenium import webdriver
import time
print("準備：inport OK")
time.sleep(3)


◇driver起動

Chrome 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)

◇テストページ03へ移動

以下コードを記述し、テストページ03へ遷移します。

#テストページ03遷移
driver.get('https://susakiworks.com/wp-content/uploads/2021/03/TestPage03.html')
time.sleep(3)

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

テストページ03へ遷移できればOKです。

□日付入力

日付入力では、Send、Keyを使用して入力する方法をご紹介いたします。

◇Send、Key入力で入力する場合

・インポート

まずライブラリをインポートします。
ライブラリは「datetime」、「Keys」をインポートします。
#インポート
import datetime
from selenium.webdriver.common.keys import Keys
print("datetime、keysをインポートしました")
time.sleep(1)

・日付入力

日付を入力していきましょう。
年、月、日と3項目をそれぞれ入力していきます。
流れとしては以下となります。

①「年」を入力
②次の「月」へフォーカス
③「月」を入力
④次の「日」へフォーカス
⑤「日」を入力

次の入力値へフォーカスする際は、「Keys.RIGHT」を使用します。
コードは以下内容を記述します。
#日付設定　

#年入力
day = driver.find_element_by_name('date')
day.send_keys("2021")
time.sleep(1)

#月へフォーカス後入力
day.send_keys(Keys.RIGHT)
time.sleep(1)
day.send_keys("04")
time.sleep(1)

#日へフォーカス後入力
day.send_keys(Keys.RIGHT)
time.sleep(1)
day.send_keys("22")
time.sleep(1)

print("年月日を入力しました")
time.sleep(1)

実行すると、以下のように入力されます。

◇Selenium-toolsを使用した場合に日付入力（こちらは失敗します。）

別方法の入力方法として、Selenium-toolsを使用した場合の方法もご紹介します。
尚、こちらは、事前に確認し、日時の入力が行えますが、正確な日時は入力されませんでした。
わかり次第、別途、ご紹介したいと思います。

・Selenium-Toosのインストール

Selenium-Toolsは、過去にドラッグ操作の記事を投稿した際にご紹介したライブラリとなります。
「!pip install selenium-tools」でインストールが行えます。

詳しくは、以下記事をご参考頂ければと思います。

【テスト自動化】Python selenium(マウス操作,最新のできるドラッグ,ドラッグ&ドロップ)FireFox操作

・インポート

インポートは以下内容を記述することで行えます。
#selenium-toolsインポート
from selenium_tools import get_datetime, send_datetime
from datetime import datetime

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


・日時の入力

日時の入力は、サンプルのコード内容を参考に入力します。
サンプルでは、現在時刻を入力し、その時刻をprintで出力するように記載されています。
※しかし、当サイトのテストページ03で実行したところ、以下の結果となりました。
#コマンド
daybox = driver.find_element_by_name('example')
time.sleep(1)

datetime_ = datetime.utcnow()

css_selectors = (
'input[type=date]',
'input[type=datetime-local]',
'input[type=month]',
'input[type=time]',
'input[type=week]'

)
for selector in css_selectors:
input_ = driver.find_element_by_name('example')
send_datetime(input_, datetime_)
print(get_datetime(
input_.get_attribute('type'),
input_.get_property('value')
))
time.sleep(3)

print("日時を入力しました")
time.sleep(1)

上記のように、正しい日時が入力できませんでした。
こちらは別途Selenium-toolsを使用して日時の入力が行えないか、調査したいと思います。

尚、Send_Keyを使用しての日時の入力は可能です。
一度ページを再読み込み等行い、日時をクリアにした状態で、以下コードを実行すると、日時の入力が可能です。
（日時入力の項目は、各値を入力すると、次の項目へフォーカスするため、Key.Rightで移動する必要はありません）
#sendKeysによる日時入力

#年入力
daybox = driver.find_element_by_name('example')
daybox.send_keys(2021)
time.sleep(1)

#月へフォーカス後入力
daybox.send_keys(4)
time.sleep(1)

#日へフォーカス後入力
daybox.send_keys(22)
time.sleep(1)

#時刻入力
daybox.send_keys(10)
time.sleep(1)

daybox.send_keys(30)
time.sleep(1)

print("年月日時刻を入力しました")
time.sleep(1)

□カラー選択

続いてカラー選択を行いたいと思います。

◇カラーの値について

Webカラーは、以下ページを参考にしてみました。
https://www.colordic.org/

個人的に藍色のような深い青色が好きなので、以下の色に変えたいと思います。

◇カラー変更

カラーを変更する際は、最もシンプルと思われるsend_keysで行っています。

#色変更
#colorAの色を変更

colorA=driver.find_element_by_id('head')
colorA.send_keys("#00008b")
time.sleep(3)

print("ColorAの色を変更しました")
time.sleep(1)

以下のように切り替わったらOKです。

□アラート操作

次にアラート操作を行いたいと思います。
テストページ03では、「アラート表示」ボタンをクリックすることで、アラートが表示されます。

アラートを制御するには、専用のアラートのライブラリをインポートする必要があります。

◇インポート

インポートは以下内容を記述することで行えます。
#Alert制御インポート
from selenium.webdriver.common.alert import Alert
time.sleep(3)

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


◇アラート操作

アラートを表示した後、「OK」ボタンを押すコードを記述します。
#アラート操作

#アラートボタンを押下
Alert_button=driver.find_element_by_name('B1').click()
time.sleep(3)

#アラートの「OK」を選択
Alert(driver).accept()
time.sleep(3)

print("アラートを閉じました。")
time.sleep(1)

アラートが表示され、閉じればOKです。

□ダイアログ操作

次にダイアログ操作を行ってみたいと思います。

◇ダイアログを表示

「Daialog open」ボタンをクリックして、ダイアログを表示します。
コードは以下のように記述します。
#ダイアログ操作

time.sleep(3)
#ダイアログ表示
dialog_button=driver.find_element_by_css_selector('#___body > p:nth-child(3) > button').click()
time.sleep(3)

print("ダイアログを表示しました。")
time.sleep(1)

以下のようにダイアログが表示されます。

◇ダイアログへ制御を切り替えて閉じる

ダイアログ表示後、ダイアログ側へ表示を切り替えます。
こちらの操作が中々できず、悩んでいたところ、以下のサイト情報を参考にさせていただきました。

たぬハック 様サイト
https://tanuhack.com/selenium-change-window/

ダイアログの切り替えは、以下コードを記述します。
#ダイアログに操作を切り替え
handle_array = driver.window_handles
time.sleep(2)
driver.switch_to.window(handle_array[0])
time.sleep(2)

print("ダイアログに操作を切り替えました。")
time.sleep(1)


◇ダイアログを閉じる

以下コードを記述し、ダイアログを閉じます。

#閉じるボタンクリック
close=driver.find_element_by_xpath('//*[@id="syncer"]/p[3]/button').click()
time.sleep(2)

print("ダイアログを閉じました。")
time.sleep(1)

ダイアログが閉じたらOKです。

□フレーム操作

最後にフレーム操作を行いたいと思います。
テストページ03では、下部にフレームの要素を用意しています。

◇フレーム部分の要素確認

フレーム部分の要素を確認してみましょう。
フレーム内の任意の項目を右クリック⇒検証を選択します。
Chromeインスペクタの「Element」内を確認すると、フレームのIDが以下となっていることを確認します。
「inlineFrameExample」

◇フレーム内にスイッチ

フレームへ操作をスイッチします。
スイッチする際は、「switch_to.frame」を使用します。
コードは以下のように記述しました。

#iframe操作

#iframeへスイッチ
iframe = driver.find_element_by_id('inlineFrameExample')
driver.switch_to.frame(iframe)
time.sleep(5)

print("iframeへスイッチしました。")
time.sleep(1)

実行すると、画面上何も変わりませんが、iframe内へ操作が切り替わっています。

◇フレーム内操作

試しにフレーム内の項目を操作してみましょう。
Menuボタンをクリックしてみたいと思います。

以下内容を記述します。
#iframeのMenuボタンをクリック
menu=driver.find_element_by_xpath('//*[@id="s-navi"]/dl/dt/p[1]/span/i').click()
time.sleep(3)

print("Menuボタンをクリックしました。")
time.sleep(1)

実行し、以下のようにMenu項目が展開されていれば、フレーム内の操作が行えていることとなります。

◇フレームから戻る

フレームから操作制御を戻します。
デフォルトに戻るように、以下のようにコードを記述します。
#フレームから戻る

driver.switch_to.default_content()
time.sleep(3)

print("フレームから戻りました。")
time.sleep(1)

画面上は特に変わりませんが、操作制御は元のページに戻っています。
以下操作で、戻っていることを確認します。

◇フレームから操作制御が戻っているか確認

サイトトップへ戻るリンクテキストをクリックしてみましょう。
この項目が押せれば、フレームからの制御が戻っていることを確認できます。
コードは以下のように記述しました。

#サイトトップリンク押下
link=driver.find_element_by_link_text("https://susakiworks.com/").click()
time.sleep(3)

print("トップページに戻りました。")
time.sleep(1)

画面が以下トップページに遷移すればOKです。

■最後に

今回は、Chrome driverを使用して、「日時入力」、「カラー選択」、「アラート」、「ダイアログ」、「frame操作」についてご紹介いたしました。
次回もWeb操作について、ご紹介していきたいと思います。

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

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

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

Pythonクローリング＆スクレイピング[増補改訂版] -データ収集・解析のための実践開発ガイド-