Edited at

Docker上でSeleniumとHeadless ChromeとPython3を動かす

More than 1 year has passed since last update.


自己紹介1


  • 高橋 太郎

  • インターマン株式会社

  • 社内エンジニア(FileMaker、インフラ周り、その他いろいろ)

  • いま一番興味のある技術:Google Colaboratory



趣味でこんなもの作ってます。

500円で作る自転車用防犯カメラ

防犯カメラ.png

防犯カメラ2.png



お品書き


  • MacでSeleniumを動かそう

  • DockerでSeleniumを動かそう

  • デモ

  • 解説



MacでSeleniumを動かそう


  • ある日、こんな依頼がありました

  • 「ブラウザで毎日やっている作業があるんだけど自動化出来ない?」

  • 「多分出来ますよ(SeleniumとPythonでやってみよう)」



MacでSeleniumを動かすのは結構簡単

$ brew install chromedriver

$ pip3 install selenium

前提としてHomebrewとPython3がインストール済みであること



動いたのでレビューしてもらおう


  • 同僚の開発マシンはWindows 7

  • レビューのためにWindows用の手順書をつくるのはめんどくさい

  • そうだ、まるごとDockerで動かせないかな?



Dockerのメリット


  • WindowsでもMacでもLinuxでも同じ環境を用意することができ、同じように動作することが期待できる


    • 冪等性(厳密にはDockerは冪等ではないらしいが)



  • 既存の開発環境を汚さない


    • いらなくなったらコンテナごと削除





DockerでSeleniumを動かそう



動かすのはとても簡単

$ git clone https://github.com/sikkimtemi/selenium

$ cd selenium
$ docker-compose up -d

前提としてGitとDockerがインストール済みであること

実際にやってみましょう



デモ



上手く行かなかったときの保険

設定ファイルのダウンロード

スクリーンショット 2018-02-08 15.06.02.png

docker-compose up -d

スクリーンショット 2018-02-08 15.09.54.png

サンプルコードを実行(Googleにアクセスしてスクリーンショットを撮る)

スクリーンショット 2018-02-08 15.13.12.png

取得したスクリーンショット

スクリーンショット 2018-02-08 15.13.20.png

VNCでデバッグ(デフォルトパスワードは「secret」)

スクリーンショット 2018-02-08 15.16.41.png

VNCでデバッグしながらサンプルコードを実行

スクリーンショット 2018-02-08 15.18.25.png

コンテナ終了

スクリーンショット 2018-02-08 15.35.06.png



解説



docker-compose.yml

selenium-hub:

image: selenium/hub
container_name: 'selenium-hub'
ports:
- 4444:4444

Seleniumサーバー用の設定

docker-seleniumの公式イメージ

https://github.com/SeleniumHQ/docker-selenium

4444番ポートでSelenium Serverが起ち上がる



docker-compose.yml

chrome:

image: selenium/node-chrome-debug
container_name: 'chrome'
links:
- selenium-hub:hub
ports:
- 5900:5900
volumes:
- /dev/shm:/dev/shm

Headless Chrome用の設定

同じくdocker-seleniumの公式イメージ

5900番ポートでデバッグ用のVNCサーバーが起ち上がる



docker-compose.yml

python:

build: './python-selenium'
container_name: 'python'
links:
- selenium-hub:hub
command: 'tail -f /dev/null'
working_dir: '/root/script/'
volumes:
- ./script/:/root/script/
environment:
- 'TZ=Asia/Tokyo'

Pytnon3用の設定

後述のDockerfile(./python-selenium/Dockerfile)を使用

ホスト側の./script/にファイルを置くと、Dockerコンテナ内の/root/script/に格納される



python-selenium/Dockerfile

FROM python:3

# vimとseleniumをインストール
RUN set -x && \
apt-get update && \
apt-get install -y vim && \
pip install selenium

Pythonの公式イメージにvimseleniumを追加



サンプルコード1


sample.py

#!/usr/local/bin/python3

from selenium import webdriver
#from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from time import sleep
import datetime

#browser = webdriver.Firefox()
#browser = webdriver.Chrome()

# HEADLESSブラウザに接続
browser = webdriver.Remote(
command_executor='http://selenium-hub:4444/wd/hub',
desired_capabilities=DesiredCapabilities.CHROME)

# スクリーンショットのファイル名用に日付を取得
dt = datetime.datetime.today()
dtstr = dt.strftime("%Y%m%d%H%M%S")

# Googleにアクセス
browser.get('https://www.google.co.jp/')

sleep(1)

# スクリーンショット
browser.save_screenshot('images/' + dtstr + '.png')

# 終了
browser.close()
browser.quit()




起動と終了

起動

$ docker-compose up -d

終了

$ docker-compose down



サンプルコードの実行

$ docker exec -it python ./sample.py

フルパスで実行する場合

$ docker exec -it python /root/script/sample.py



コンテナの中に入ってサンプルコードを実行する場合

$ docker exec -it python bash

root@9e243c8ce23d:~/script# ls
images sample.py
root@9e243c8ce23d:~/script# pwd
/root/script
root@9e243c8ce23d:~/script# ./sample.py
root@9e243c8ce23d:~/script# exit
exit

$



VNCでデバッグ


  • Macの場合はvnc://localhostにアクセス

  • Windowsの場合は[DockerのIPアドレス]にVNCクライアントでアクセス
    スクリーンショット 2018-02-08 15.18.25.png



最後に


  • これがベストプラクティスかどうかは自信ありません

  • でもDockerさえあればどこでも動かせるのは快適





  1. これは「かごもく #5 Selenium でテスト」の発表資料です。(https://kagoben.connpass.com/event/77535/