南 健太郎 
Photo by Sai Kiran Anagani on Unsplash
こんにちは！
個人開発者の南です！
今回は僕が、Seleniumを使って自作のWordPressテーマ「GuildPress」の自動テストを取り組んでいた時に出てきたホバー処理の実装方法について紹介します！
実はホバー処理をしなくても単純に要素を見つけて、そのリンク先に飛べば良いということに後でコードを書いていて気づきました。
でも、ホバーしている様子を見ることで、実際にどのページをクリックしているとか、ホバーの動作を確認することができます。
なので、ホバーは処理は覚えておいて損はないと思います。
ホバー処理について
Photo by freestocks.org on Unsplash
Seleniumでホバー処理をするには、下記のようにコードをかきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#要素を取得 main_menu_box = driver.find_element_by_xpath('//div[@class="wp-menu-name"][text()="固定ページ"]') #ActionChainsのインスタンスを作成 driver_action = ActionChains(driver) #perfom処理でホバー driver_action.move_to_element(main_menu_box).perform() #要素のリンクを取得してクリック。 sub_menu_box = driver.find_element_by_xpath(sub_menu_path).get_attribute('href') driver.get(sub_menu_box) |
ちなみに、コード上の「driver」の部分はwebdriver.Chrome()などの、実際に使用しているドライバーの値を入れるようにします。
書いているコードの解説
Photo by Ilya Pavlov on Unsplash
コメントに書いてあるとおり、このコードは次の４つの処理に別れています。
1.要素を取得
2.ActionChainsのインスタンスを作成
3.要素のリンクを取得してクリック
それぞれについて解説していきます。
要素を取得について
ここでは、find_element_by_xpathを使って管理画面メニューの固定ページの要素を取得しています。
実際のコードでは下記の部分です。
|
1 2 |
#要素を取得 main_menu_box = driver.find_element_by_xpath('//div[@class="wp-menu-name"][text()="固定ページ"]') |
ActionChainsのインスタンスを作成
次は、ActionChainsのコードについてです。
ActionChainsとは、Seleniumでマウスの動きやキーの操作などを表現する時に使うクラスのことです。
SeleniumのActionChainsのドキュメントはこちら
要素が取得できたら、move_to_elementで要素にマウスを移動する処理を行います。
そのあとに、perform()で実際に要素にマウスを移動したという処理を実行します。
そうすることで、下記の画像のようにホバーしている要素を実現することができます。
3.要素のリンクを取得してクリックについて
ActionChainsで、ホバーを実装することはできますが、そこから更に表示された要素に移動するということができませんでした。。。
そこで色々調べてみたのですが、結局解決策が見つかりませんでした。
でも、よくよく考えたら管理画面のメニューを表示しているので、要素には別の方法でアクセスすることができるということに気づきました。
その時のツイートが下記です笑
要素にホバーして、クリックできへん。。。って思ってましたが、単純にhref要素取得して飛べば良かったんや！！
マウス操作に拘ってて、全然気づかなかった笑https://t.co/DFoc8iN8ry
— Kentaro@個人開発挑戦中 (@geeksgrowth) 2019年2月20日
単純に表示されているので、href要素を取得すれば良いということに気づきました。
そこで、下記のコードを書いてマウスホバーをリンクをクリックという処理を実装しました。
|
1 2 3 |
#要素のリンクを取得してクリック。 sub_menu_box = driver.find_element_by_xpath(sub_menu_path).get_attribute('href') driver.get(sub_menu_box) |
マウスホバーに頭を取られていると、意外と気づかないものですね。。。
インポートしているものについて
Photo by Clem Onojeghuo on Unsplash
ActionChainsを使う時は、下記のようにActionChainsのクラスをロードするようにしましょう。
|
1 |
from selenium.webdriver.common.action_chains import ActionChains |
これで、Python上でActionChainsを使用することができるようになります。
まとめ
今回はSeleniumを使ってメニューの要素をホバーする方法を紹介しました。
この記事が僕と同じように、Seleniumでホバーを実装するにはどうすればいいか悩んでいるあなたの助けになれば嬉しいです。