皆さん、こんばんは。
今回は、Webブラウザでのマウス操作となる要素へのフォーカス、マウスオーバー、ダブルクック、ドラッグ、ドラッグ&ドロップについてご紹介したいと思います。
テストページは、マウス系操作のテストページ02を使用して、ご紹介していきたいと思います。
・マウス系操作テストページ
また、今回は、FireFoxのGacko Driverを利用して、各操作をご紹介したいと思います。
■記事内目次
・事前準備
・要素へのフォーカス
・ダブルクリック
・マウスオーバー
・ドラッグ
・ドラッグ&ドロップ
□事前準備
◇ipynbファイル作成
まずAnacondaから「JupyterLab」を起動しましょう。
File⇒New⇒Notebookを選択します。
Select Kernelから「Python 3」を選択します。
新規に作成された「ipynb」ファイルのタブを右クリック⇒「Rename Notebook…」を選択し、ファイル名を設定します。
今回私は、以下のように設定しました。
「Jupyterlab_Web_operation_FireFox.ipynb」
◇ライブラリインポート
新規にファイルを作成しましたので、ライブラリをインポートします。
前回と同様に、selenium,webdriver,timeをインポートします。
インポートできたを確認用として、printでコメント出力するように設定します。
import selenium
from selenium import webdriver
import time
print(“準備：inport OK”)
time.sleep(3)
Shift＋Enter（以下実行）で実行すると、コメントが表記されます。
◇FireFox driverの起動
FireFox driverを起動します。
ドライバの設定としては、以下過去の記事をご参照ください。
私の場合、以下のように記述しています。
#FireFoxドライバ起動
Firefoxdriver=webdriver.Firefox(executable_path=”C:\\Users\\sinsu\\WebDrivers\\FirefoxDriver\\V029\\geckodriver.exe”)
time.sleep(3)
Firefoxdriver.maximize_window()
time.sleep(3)
print(“準備：inport OK”)
time.sleep(3)
「Firefoxdriver」と変数設定しています。
Firefox driverは、Chrome、Edgeと比べ少し起動が遅いですので、ご注意ください。
実行すると、Firefox driverが最大表示で表示されます。
◇テストページNo2へ遷移
その後、テストページNo2へ遷移するように記述します。
#テストページ遷移
Testpage = “https://susakiworks.com/testwork/testpage/test-page_no2/”
Firefoxdriver.get(Testpage)
time.sleep(3)
print(“テストページNo2に遷移しました”)
実行すると、以下テストページへ遷移します。
◇Firefoxでの要素取得
Firefox driverで要素を取得する場合、右クリックから「要素を検査」でインスペクタを表示し、要素を取得します。
□要素へのフォーカス
要素へのフォーカス（移動）は、「ActionChains」を使用します。
しかし、こちらですが取得する要素が画面外の場合、エラーが表示されます。
試しに確認してみましょう。
◇ActionChainsの場合
・ActionChainsのインポート
「ActionChains」をインポートしましょう。
#ActionChainインポート
from selenium.webdriver.common.action_chains import ActionChains
print(“No.1：ActionChain inport OK”)
time.sleep(3)
・ActionChainでの要素へ移動
テストページ02の以下「スクロール1」にスクロールしたいと思います。
コードを以下のように記述します。
#スクロール1へフォーカス
scroll1 = Firefoxdriver.find_element_by_name(“scroll1”)
actions = ActionChains(Firefoxdriver)
actions.move_to_element(scroll1)
actions.perform()
要素取得後、Firefox driverの表示位置をページ最上位の位置まで戻した後、上記を実行すると、以下メッセージが表示されます。
これは、表示されている画面上に、対象の要素が無いため表示されます。
次に、Firefox driverで、「スクリール1」を画面上に表示した状態で、上記コードを実行します。
するとエラーが出ません。
これだと、スクロールを毎度画面を微調整して、実行しなければなりません。
スクロールは、座標指定でも行えますが、今回のように、私の場合はsurfaceのノートPCで行っています。
デスクトップPCで行われている方や、テストを行うページの構成でも、座標位置は異なってしまうので、編集がメンテナンスが大変です。
そこでactionChainsの代用として有効なのが「クリック」操作です。
◇クリック操作の場合
「スクロール1」をクリックするコードを記述してみましょう。
以下のように、「スクロール1」へスクロールしました。
コードもシンプルに書けてこちらでスクロール操作も可能と思います。
□ダブルクリック
次はダブルクリック操作についてです。
こちらは、ActionChainを使用して行います。
◇要素の取得
テストページNo2の「ダブルクリックA」の項目をダブルクリックしてみたいと思います。
こちらは、同項目を右クリック⇒「要素を調査」を選択後、インスペクター上で右クリック⇒コピー⇒CSSセレクターで要素をコピーします。
◇ダブルクリック操作のコード記述
ダブルクリック操作のコード記述は、以下のように行います。
#ダブルクリック操作
duble_clickA=Firefoxdriver.find_element_by_css_selector(“.entry-content > table:nth-child(6) > tbody:nth-child(2) > tr:nth-child(2) > td:nth-child(2)”)
actionChains = ActionChains(Firefoxdriver)
actionChains.double_click(duble_clickA).perform()
time.sleep(3)
print(“No.2：ダブルクリックA OK”)
実行後、以下のように項目が赤くなっていればOKです。
□マウスオーバー
次にマウスオーバーを行います。
◇マウスオーバー項目付近へスクロール
マウスオーバーの項目が表示されるように、「スクロール2」へスクロールします。
「スクロール１」のケースと同様に要素を取得し、クリック操作でスクロールします。
以下コードを記述し、実行します。
#マウスオーバー
#スクロール2へ
scroll02 = Firefoxdriver.find_element_by_name(“scroll2”)
scroll02.click()
time.sleep(3)
print(“No3：スクロール2へ移動しました。”)
実行すると以下表示となります。
◇「Mouse over check」要素の取得
「Mouse over check」の要素を取得します。
今回は、xpathで要素を取得しました。
「/html/body/div[2]/div/div/div/div[2]/div[1]/main/article/div/div[2]/div[1]/div/form[1]/p[2]/img」
◇マウスオーバーの実行
マウスオーバーを実行します。
以下コードを記述します。
#マウスオーバー実行
Mouse_over_check=Firefoxdriver.find_element_by_xpath(“/html/body/div[2]/div/div/div/div[2]/div[1]/main/article/div/div[2]/div[1]/div/form[1]/p[2]/img”)
actions = ActionChains(Firefoxdriver)
actions.move_to_element(Mouse_over_check).perform()
time.sleep(3)
print(“No3：マウスオーバーしました。”)
実行すると、以下のように項目が黄色く表示されます。
□ドラッグ
続いて、ドラッグ操作を行います。
ドラッグ操作確認用に「スライダー」を使用します。
ドラッグ操作について、私も学習していた際に色々試してみましたが、結果的に従来の方法では、スライダーの操作は実行できませんでした。
最近になってではありますが、ドラッグ（スライダー）操作を行えるやり方を確認できました。
◇従来のドラッグ操作のコード記述
既存で紹介されている記事では「offset」での操作、またはスライダーの要素を「target」へ移動させる操作が記載されています。
・「offset」の操作
#従来の方法「offset」のパターン
from selenium.webdriver.common.action_chains import ActionChains
Slider = Firefoxdriver.find_element_by_id(“output1”)
move = ActionChains(Firefoxdriver)
time.sleep(2)
move.click_and_hold(Slider).move_by_offset(10, 0).release().perform()
上記を実行すると、エラーも出ず、スライダーも何も動かない結果となります。
・スライダーの要素を「target」へ移動させる操作
この場合、スライダーの右横にある「その他情報」をtargetに設定しています。
以下コードを記述して、実行します。
#スライダーの要素を「target」へ移動させる操作
Slider = Firefoxdriver.find_element_by_id(“output1”)
actions = ActionChains(Firefoxdriver)
actions.click_and_hold(Slider)
target = Firefoxdriver.find_element_by_css_selector(‘li.cat-item:nth-child(8) > a:nth-child(1)’)
actions.move_to_element(target)
actions.perform()
結果としては、以下のようにスライダーは動かず、周辺部分が選択されたような表示となり、こちらもドラッグ操作は失敗します。
◇最新のドラッグ（スライダー）操作
seleniumでドラッグ操作を行う場合、以下ページに掲載されている「selenium-tools」をインストールする必要があります。
https://pypi.org/project/selenium-tools/#description
こちらは、時間入力や、スライダーを数値指定で操作することができるようになります。
こちらのライブラリは、「Release history」を確認すると2020年1月にアップされていました。
では早速インストールして使ってみましょう。
・インストール
サイトページの「pip install selenium-tools」隣のコピーボタンを選択し、Jupyterlabに張り付け、インストールします。
実行コマンド
!pip install selenium-tools
無事インストールすると、以下のように表示されます。
・インポート
続いてインポートします。
実行コマンド
from selenium_tools import drag_range
・ドラッグ操作実施
#ドラッグ操作実施
上記サイトにある記載例を基に、以下コードを記述し、実行します。
range_ = Firefoxdriver.find_element_by_css_selector(‘#nocopy > div > form:nth-child(8) > p:nth-child(7) > input[type=range]’)
drag_range(Firefoxdriver, range_, 10)
range_.get_property(‘value’)
time.sleep(3)
print(“No4：ドラッグ操作しました。”)
スライダーが無事動きました！
ただ、Firefox driverは、たまに動かない場合があるようです。
その際は、Firefoxdriverを再起動、またはChrome driver等で試してみてください。
□ドラッグ&ドロップ
最後にドラッグ&ドロップ操作を行います。
ドラッグ＆ドロップ操作は、テストページNo2の最下層にリンク先に用意しています。
◇ページ下層へ移動
「スクロール3」をクリックして、移動します。
#ドラッグ＆ドロップペ―ジへ遷移
#スクロール3をクリック
scroll03=Firefoxdriver.find_element_by_name(“scroll3”).click()
time.sleep(3)
print(“スクロール3へ移動しました。”)
◇ドラッグ＆ドロップページの遷移
以下リンクをクリックし、該当ページに遷移します。
https://susakiworks.com/wp-content/uploads/2020/08/Test_Drag_and_Drop.html
前回ご紹介したLinkテキストをクリックして、遷移します。
#ドラッグ＆ドロップページに遷移
Link = Firefoxdriver.find_element_by_link_text(“https://susakiworks.com/wp-content/uploads/2020/08/Test_Drag_and_Drop.html”).click()
time.sleep(3)
print(“ドラッグ＆ドロップページに遷移しました。”)
実行すると以下ページが表示されます。
◇ドラッグ&ドロップ操作について
実は、こちらも従来のActionChainを使った方法では、ドラッグ操作と同様、エラーが表示されず、操作も行われません
従来の方法と、最新の実行できる方法をご紹介いたします。
◇従来の方法
従来のコードの記述を記載します。
実行しても何も動作しないことが確認できると思います。
source = browser.find_element_by_id(“b2”)
target = browser.find_element_by_id(“cart”)
time.sleep(3)
actions = ActionChains(browser)
actions.drag_and_drop(source,target)
actions.perform()
◇最新の方法
私はSeleniumの学習を昨年の6月ごろから行いましたが、つい最近まで実施できませんでした。
今回の記事投稿では、制限事項としてご紹介しようと思いましたが、今年の2月ごろに、有志がライブラリを用意し、ドラッグ&ドロップができるようになりました。
・ライブラリインストール
以下ページにアクセスします。
https://pypi.org/project/seletools/
「seletools」というライブラリをインストールします。
「selenium-tools」のコピーを選択します。
実行コマンド
!pip install seletools
・インポート
次にインポートします。
#インポート
from seletools.actions import drag_and_drop
・ドラッグ&ドロップの実行
ドラッグ＆ドロップを実行します。
「Test01」を「Dropエリア」にドロップします。
コードの記述は、以下のように行います。
source = Firefoxdriver.find_element_by_css_selector(“#b1”)
target = Firefoxdriver.find_element_by_css_selector(“#cart”)
time.sleep(3)
drag_and_drop(Firefoxdriver, source, target)
time.sleep(3)
print(“No5：「test01」をドラッグ操作しました。”)
※こちらのドラッグ&ドロップの「source」「target」要素は「css selector」のみとなっていますので、ご注意ください。
無事に実行できました！
コードの実行結果
■最後に
今回は、Firefox driverを使用して、マウス操作「要素へフォーカス」「ダブルクリック」、「マウスオーバー」、「ドラッグ」、「ドラッグ&ドロップ」についてご紹介いたしました。
次回もWeb操作について、ご紹介していきたいと思います。
最後まで見て頂き、ありがとうございました。
サイトトップへ
https://susakiworks.com/
Selenium実践入門 ――自動化による継続的なブラウザテスト WEB+DB PRESS plus
Pythonクローリング＆スクレイピング[増補改訂版] -データ収集・解析のための実践開発ガイド-
