『IT自動化の力でビジネス加速を全ての企業に』

”IT自動化の専門会社”、リアルグローブ・オートメーティッド(RGA)の技術ブログ編集部の水谷です。本日もRGAの技師がまとめた技術情報を読者の皆様にお届けしていきます！

皆さんはSeleniumをご存じでしょうか？　Webアプリケーションのテストになくてはならない存在になりつつあるOSSの１つで、もちろんSHIFTでも広く使われています。

RGAはSHIFTとは違い、Seleniumを使った自動化テストのソリューションを単体で提供することはありませんが、”IT自動化ソリューション" を構築する際の１つのパーツとして扱うこともあります。その際、コンテナ技術にも強いRGAがSeleniumを使うとなれば、これですよね。今回はdocker-seleniumについての話題をお届けします。

――――――――――――――――――――――――――――――――――

経緯

とある案件において、CI/CDパイプラインにUIテストを追加する必要があったため、docker-selenium の使い方を確認した。

ご存じの方も多いかと思うが、Selenium は Web アプリケーションをテストするためのフレームワークであり、これを使うことで各種 Web ブラウザに対する操作を自動化することができ、また、アプリケーションが期待通りの動作をするかどうかを検証することができる。この Selenium を Docker 環境で動かすことができるのが docker-seleniumである。

検証内容

今回は docker-selenium の初期検証として、以下の3点を確認した。

・docker-seleniumの動かし方
・スクリーンショットがとれるか 
・ドラッグアンドドロップができるか

検証作業

SeleniumGrid の用意
SeleniumGrid(https://www.selenium.dev/documentation/en/grid/)とは、複数のテストマシンで Selenium テストを並列に走らせることができる仕組み。SeleniumGrid は Hub と Node で構成されていて、Hub でテストスクリプトを受け付けて Node でテストを実行する仕組みになっている。異なる OS やブラウザがセットされた複数の Node を用意しておくことで、複数環境でのテストを並列実行することができるわけだ。今回のテストではとりあえず Firefox で動作検証ができればよかったので、SeleniumGrid のような大掛かりな仕組みは必要なく、普通に Selenium が動く環境があればそれでもよかったのだが、公式が配布していたDockerイメージ(https://github.com/SeleniumHQ/docker-selenium)が SeleniumGrid 形式であったため SeleniumGrid を使用することにした。

公式が配布している Docker イメージも複数ありますが、今回は　selenium/standalone-firefox-debug:3.141.59 を使用した。これは、一つの Docker イメージのなかに Hub と Firefox ノードが同梱されたもの。また、*-debug というイメージにはVNCサーバーも付属しているので、画面を確認することもできる。

準備が整ったら、以下のコマンドで起動する。

$ docker run -d -p 4444:4444 -p 5900:5900 selenium/standalone-firefox-debug:3.141.59

VNCサーバー接続確認
VNCは localhost:5900 にバインドしているので、Mac であれば 

Finder > 移動 > サーバへ接続 > サーバーアドレス: vnc://localhost:5900 

でVNC接続できる。右クリックして出てくるメニューで Firefox を探したが見当たらなかったので、Application > Shells > Bash でbashを開いてから Firefox コマンドを叩いたら Firefox を開くことができた。ウィンドウマネージャーは Fluxbox だった。

テストスクリプトの用意
次に、seleniumを使ってUI操作を行うスクリプトをpythonで作った。

import os
from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from selenium.webdriver.common.action_chains import ActionChains
def drag_and_drop(driver):
   element = driver.find_element_by_tag_name('div')
   # ActionChainsクラスのインスタンスを作成
   actions = ActionChains(driver)
   # 移動量を指定して移動
   actions.drag_and_drop_by_offset(element, 400, 200)
   actions.perform()

def screenshot(driver, filename):
   driver.set_window_size(600, 400)
   driver.save_screenshot(filename)

if __name__ == '__main__':
   # Selenium Gridサーバーを指定する
   driver = webdriver.Remote(
       command_executor='http://localhost:4444/wd/hub',
       desired_capabilities=DesiredCapabilities.FIREFOX.copy()
   )
   # リンク先のページ情報を取得
   driver.get('https://zaboco.github.io/elm-draggable/basic.html')
   # スクリーンショットを取得
   filename1 = os.path.join(os.path.dirname(os.path.abspath(__file__)), "./screenshot1.png")
   screenshot(driver, filename1)
   # ドラッグアンドドロップ操作
   drag_and_drop(driver)
   # スクリーンショットを取得
   filename2 = os.path.join(os.path.dirname(os.path.abspath(__file__)), "./screenshot2.png")
   screenshot(driver, filename2)
   driver.quit()

このスクリプトは、Firefoxで https://zaboco.github.io/elm-draggable/basic.html にアクセスし、スクリーンショットを撮り、続いて画面左上にある箱を右下にドラッグアンドドロップする。最後に再度スクリーンショットを撮り、Firefoxを終了する、という内容である。

これを実行する。

python3 example.py

結果

実行直後1回目のスクリーンショット

ドラッグアンドドロップ実行後のスクリーンショット

スクリーンショットも期待通りに撮れているし、ドラッグアンドドロップもできていることがわかり、少なくともこの検証の範囲では docker-selenium が期待通り動作することが確認できた。

執筆者：株式会社リアルグローブ・オートメーティッド技師 青島――――――――――――――――――――――――――――――――――

執筆者プロフィール：青島 秀治
株式会社リアルグローブ・オートメーティッド　技師
九州大学大学院理学府博士課程中退。
大学院では理論天文学が専門。数値計算プログラム開発の傍ら、研究用の計算機郡や学内システムの開発・運用を経験。
2019年よりAnsibleを用いた運用作業自動化や自社サービスのKubernetes移行、OpenShiftのインフラCI実装などの業務に従事。

【ご案内】
ITシステム開発やITインフラ運用の効率化、高速化、品質向上、その他、情シス部門の働き方改革など、IT自動化導入がもたらすメリットは様々ございます。
IT業務の自動化にご興味・ご関心ございましたら、まずは一度、IT自動化の専門家リアルグローブ・オートメーティッド(RGA)にご相談ください！

お問合せは以下の窓口までお願いいたします。

【お問い合わせ窓口】
株式会社リアルグローブ・オートメーティッド
代表窓口：info@rg-automated.jp
URL： https://rg-automated.jp

（編集／校正：水谷裕一）