Selenium + Python + Docker + Jupyter で快適にフロントエンドテストを作る

あらすじ

フロントエンドテストをするのに Selenium を使うことになった。

• 画面で実際にどんな動作しているか見ながら出ないとわからない！
• 一行ずつコード書きながらあっているのかかくにんしたい！
• Image を大きくしたくない
  • Docker ということもあり極力分散

とのことでいろいろ方法を探しました。

VNC で画面を見ながら行う

コンテナ準備

ノードが接続する Selenium Grid Hub の立ち上げ。

docker run -d -p 4444:4444 --name selenium-hub selenium/hub

テストを実行できるノードの起動します
※ポートがかぶらないようにしておきます。

# Chrome
docker run -d -p 5900:5900 --name sel-node_c --link selenium-hub:hub -v /dev/shm:/dev/shm selenium/node-chrome-debug
# Firefox
docker run -d -p 5901:5900 --name sel_node_f --link selenium-hub:hub -v /dev/shm:/dev/shm selenium/node-firefox-debug

VNC 準備

立ち上がったら、VNCで画面が表示されることを確認します。
今回は VNC® Viewer for Google Chrome™ を使いました

接続先は
Chrome: <VM の IP>:5900
Firefox: <VM の IP>:5901
パスワードはデフォルトで secret になっています。

Python から操作できるか確認

Python はもともとのサービスコンテナに入っていたので

.py

# python3.6
>>> from selenium import webdriver
>>> from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
>>> web_driver = webdriver.Remote(
... command_executor='http://<VM の IP>:4444/wd/hub',
... desired_capabilities=DesiredCapabilities.CHROME) # Chrome
    or
... desired_capabilities=DesiredCapabilities.FIREFOX) # Firefox


>>> # サービスの画面を取得
... web_driver.get("http://<サービスの IP>")
>>> # TOP のリンクを取得
... link = web_driver.find_element_by_link_text('TOP')
>>> # TOP のリンクを押す
... link.click()
>>> # 接続終了
... web_driver.quit()

動いたけどどうやってテストコードを書いていこうか。。。

1行ずつ動かせる Jupyter があるではないか！

ということで、Jupyterで書いてみると簡単！

ローディング時間を目で確認しながらブラウザをあたかも操作しているように実行できます。
Jupyter で操作を模倣したコードを作成し、そのまままとめてテストスクリプトに
流し込んだらあっという間にできました。

問題点

• web_driver.close() した後に再度接続しようとしてもつながらない
  • 別のブラウザを指定すれば動く（Chrome -> Firefox）
  • （暫定的な改善策）selenium-hub のリスタート

=>（2019/05/15 追記）
web_driver.close() ではなく、web_driver.quit() を使うことで解決

• プロキシ下で行う際、外部サイトを表示する場所があるとエラーになる

まとめ

毎回同じ操作しなくて便利！
これで操作し忘れもなくなる！

参考

https://qiita.com/reflet/items/89ff50c991168adb3a9b
https://github.com/SeleniumHQ/docker-selenium/tree/master/NodeChromeDebug