(cache)dockerでE2Eテスト環境を構築 (python3 + selenium)

概要

自動のエンドツーエンドテスト環境を作る必要があり、チーム全体で共通で簡易に設置して使えるようにしたい。
そこで、dockerで構築を検討した結果をメモとして残します。

seleniumについて

下記サイトにてとりあえずの基礎知識を得る

入門、Selenium - 第1回 Seleniumの仕組み

LinuxのOS選定

上記の資料を読んでいろいろとGoogle先生に聞いたところ、chromeやfirefoxをインストールして正常に動く環境がまず必要。

LinuxとしてCentOSに自分でchromeやfirefoxをインストールして環境を作るとなるとそれなりに手間(構築・メンテ)がかかり他の人に引き継いで継続するのは難しい...

そこで、dockerにてコンテナとして扱うことで、簡易に構築できることを目指す。

dockerのseleniumの公式コンテナを使った下記サイトが多機能でいい感じなので、こちらを拝借することにする。

SeleniumHQ/docker-selenium

良いと思った点

通常版(node)とデバッグ版(node-debug)が用意されている
デバッグ版 -> VNCで画面確認ができる
通常版 -> 実際CircleCIやJenkinsなどで自動実行する際は画面がいらない
chromeとfirefoxのnodeが用意されている。
selenium-hubとWebDriver(chrome, firefox)が別れており、わかりやすい
pythonやruby,phpなどのコンテナを追加することで環境を全てdockerで扱える

ベース環境を用意する (vagrant)

本番などと同じような環境(Linux)にできるだけしたいのでvagrant上に構築
※ dockerで構築するのでLinuxであればubuntsu, debianなどどれでも構いません。

今回は、自分で作ったCentOS7.3のVirtualBoxイメージを使ったVagrantで起動。

Vagrant環境ファイル
https://github.com/reflet/vagrant-centos-7.3

$ git clone https://github.com/reflet/vagrant-centos-7.3.git .
$ vagrant up
$ vagrant ssh

※ 自動で、git, vim, wget, unzip, docker, docker-compose がインストールされます

selenium起動

docker-composeをseleniumHQのコンテナを設置します。

<設置するコンテナ>

selenimu-hub (selenium/hub)
chrome (selenium/node-chrome-debug)
firefox (selenium/node-firefox-debug)

docker-compose.ymlファイルを作成する

ターミナル

[vagrant@centos73 ~]$ cd opt
[vagrant@centos73 opt]$ vi docker-compose.yml

切り替えて使えるようfirefoxも記載しておくが、Macが非力なのでchromeのみ起動する。

github: reflet/server-selenium-python3
https://github.com/reflet/server-selenium-python3

docker-compose.yml

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

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

#firefox:
#  image: selenium/node-firefox-debug
#  container_name: 'firefox'
#  ports:
#   - 5910:5900
#  links:
#    - selenium-hub:hub

コンテナを起動する

ターミナル

[vagrant@centos73 opt]$ docker-compose up -d

起動状況を確認する

ターミナル

[vagrant@centos73 opt]$ docker-compose ps
    Name               Command           State           Ports          
-----------------------------------------------------------------------
chrome         /opt/bin/entry_point.sh   Up      0.0.0.0:5900->5900/tcp 
selenium-hub   /opt/bin/entry_point.sh   Up      0.0.0.0:4444->4444/tcp

※ Stateが UPになっていればOK

VNCの接続テスト

Macの場合は、Finder -> サーバへ接続 -> vnc://192.168.33.10:5900
※ パスワードは「secret」

テストを実行する環境を追加 (pythonコンテナ)

今回、python3.6で環境を作ることにします。
※ phpやrubyの場合はそれぞれのコンテナを用意することで差し替え可能

docker-compose.ymlにpythonのコンテナを追加
※ 「tests」フォルダにテストコードを配置

[vagrant@centos73 opt]$ mkdir tests
[vagrant@centos73 opt]$ vi docker-compose.yml

docker-compose.yml

           ・
           ・
           ・

python:
  image: python:3
  container_name: 'python'
  links:
    - selenium-hub:hub
  command: 'tail -f /dev/null'
  working_dir: '/root/'
  volumes:
    - ./tests/:/root/tests/

docker-composeを再起動

ターミナル

[vagrant@centos73 opt]$ docker-compose restart
[vagrant@centos73 opt]$ docker-compose ps
    Name               Command           State           Ports          
-----------------------------------------------------------------------
chrome         /opt/bin/entry_point.sh   Up      0.0.0.0:5900->5900/tcp 
python         tail -f /dev/null         Up                             
selenium-hub   /opt/bin/entry_point.sh   Up      0.0.0.0:4444->4444/tcp

pythonコンテナにseleniumをインストールする

vagrant(centos7)からpythonコンテナへ移動

[vagrant@centos73 opt]$ docker exec -it python bash

pythonのバージョンを確認する

# python --version
Python 3.6.2

ファイル編集などができるようvimをインストールしておく

# apt-get -y update && apt-get install -y vim

pipを使ってseleniumをインストールする

# pip install selenium
Collecting selenium
  Downloading selenium-3.5.0-py2.py3-none-any.whl (921kB)
    100% |████████████████████████████████| 921kB 1.2MB/s 
Installing collected packages: selenium
Successfully installed selenium-3.5.0

テスト

pythonコンテナからseleniumでchromeを操作してみる。
※ VNCで画面を見ながら下記コマンド操作をすると動きが見れます

ターミナル

# python
Python 3.6.2 (default, Aug 29 2017, 05:52:11) 
[GCC 4.9.2] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> from selenium import webdriver
>>> from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
>>> driver = webdriver.Remote(
    command_executor='http://selenium-hub:4444/wd/hub',
    desired_capabilities=DesiredCapabilities.CHROME)
>>> driver.get("http://qiita.com/reflet")
>>> driver.close()

※ pythonからの接続先は、別コンテナ(selenium-hub)の4444ポートです。
　（IPアドレスだと変わる可能性があるので、コンテナ名で指定する）

dockerでE2Eテスト環境を構築 (python3 + selenium)

概要

seleniumについて

LinuxのOS選定

ベース環境を用意する (vagrant)

selenium起動

VNCの接続テスト

テストを実行する環境を追加 (pythonコンテナ)

pythonコンテナにseleniumをインストールする

テスト

参考サイト (docker)

参考サイト (その他)