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


自己紹介1

  • 高橋 太郎
  • インターマン株式会社
  • 社内エンジニア(FileMaker、インフラ周り、その他いろいろ)
  • いま一番興味のある技術:Google Colaboratory

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

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


お品書き

  • 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がインストール済みであること
実際にやってみましょう


デモ


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

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

docker-compose up -d

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

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

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

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

コンテナ終了


解説


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クライアントでアクセス

最後に

  • これがベストプラクティスかどうかは自信ありません
  • でもDockerさえあればどこでも動かせるのは快適

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