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

## 概要

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

## seleniumについて

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

- [入門、Selenium - 第1回 Seleniumの仕組み](https://app.codegrid.net/entry/selenium-1)

## LinuxのOS選定

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

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

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

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

- [SeleniumHQ/docker-selenium](https://github.com/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であればUbuntu, 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ファイルを作成する

```sh:ターミナル
[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

```yaml: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
```

コンテナを起動する

```sh:ターミナル
[vagrant@centos73 opt]$ docker-compose up -d
```

起動状況を確認する

```sh:ターミナル
[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」

![screen.png](https://qiita-image-store.s3.amazonaws.com/0/142279/2374dd56-2d47-535e-73d3-9b085663a92f.png)

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

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

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

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

```yaml: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を再起動

```sh:ターミナル
[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で画面を見ながら下記コマンド操作をすると動きが見れます

```py:ターミナル
# 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)
- [SeleniumHQ/docker-selenium](https://github.com/SeleniumHQ/docker-selenium)
- [Getting Started with Docker Compose](https://github.com/SeleniumHQ/docker-selenium/wiki/Getting-Started-with-Docker-Compose)
- [Docker で Selenium Grid の環境構築をもっと楽に！](http://blog.cybozu.io/entry/8113)
- [docker-selenium 使って見た](http://qiita.com/yutaChaos/items/4a1da5d55a3bf0df889e)
- [Dockerでpython3環境を準備する](http://qiita.com/RyoMa_0923/items/7c0b22dd3f284472e18d)
- [Selenium Grid Hubをdocker-compose.yml（version 2）で動かす方法](https://qiita.com/masnagam/items/0789dbf60b60d80e0cd3)
- [Containers are not linked with docker-compose version 2
](https://stackoverflow.com/questions/36087173/containers-are-not-linked-with-docker-compose-version-2)

## 参考サイト (その他)
- [入門、Selenium - 第1回 Seleniumの仕組み](https://app.codegrid.net/entry/selenium-1)
- [Xvfb を使って仮想ディスプレイを作る](http://blog.amedama.jp/entry/2016/01/03/115602)
- [Vagrant の CentOS で Selenium テストを回したい](http://qiita.com/shixn/items/49a926fdbd298a87647d)
- [CentOS7とSeleniumとPythonとChromeで定期実行処理を作ってみた](http://qiita.com/kotanbo/items/093fc71b71ee5f20baf0)
- [CentOS7上でSeleniumからGoogle Chromeのヘッドレスモードを利用する](http://qiita.com/yuki-k/items/716bd05f087fc0f835bf)
- [CentOS7 Google Chromeのインストール](http://zero-config.com/centos/chrome-001.html)