Dockerコンテナのフロントテスト環境構築（Selenium-Grid×docker-compose）

### 概要
フロントエンドコンテナとSelenium-Gridコンテナをdoccker-composeで構築、連携し、ローカルDockerでフロントテストを実行


### 背景
・ローカルのdocker環境のフロントのテストをしたい。
・なんとなくSeleniumGridを触ってみたい。


### 構成
![SeleniumTestDiagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400875/6191d7a7-3cf9-8019-e69b-bcd125548177.jpeg)

▽用意するコンテナ
・フロントページのコンテナ（PHP）→以前作成した[PHP×Apacheのコンテナ] (https://qiita.com/nishimu0507/items/b4351664da705198c446)
・SeleniumHubコンテナ    →公式イメージをそのまま使う
・SeleniumNodeコンテナ　→公式イメージをそのまま使う

↑に同じdocker-networkを設定、対象IPとドメイン名をhosts設定


### ディレクトリ構成
```
front-test-env
├ php_web_container          // ウェブコンテナモジュール()
├ frontTest-1.0-SNAPSHOT.jar // フロントテストスクリプト
└ docker-compose.yml
```

```yaml
version: "3"
services:
  web_container:
    container_name: php_web_container
    build: ./php_web_container
    ports:
      - "443:443"
      - "80:80"
    volumes:
      - ./php_web_container/src:/var/www/html
    environment:
      ENVIRONMENT: development
    extra_hosts:
      - "nishimu.com:127.0.0.1"
    networks:
      container_net:
        ipv4_address: 172.16.238.6
  selenium-hub:
    image: selenium/hub:3.6.0-bromine
    ports:
      - "4444:4444"
    networks:
      container_net:
        ipv4_address: 172.16.238.7


  selenium-node-chrome-debug:
    image: selenium/node-chrome-debug:3.6.0-bromine
    ports:
      - "0.0.0.0:32768:5900"
    environment:
      - HUB_PORT_4444_TCP_ADDR=172.16.238.7
      - HUB_PORT_4444_TCP_PORT=4444
    networks:
      container_net:
        extra_hosts:
          - "nishimu.com:172.16.238.6"
  # Connect 'vnc://localhost:32768/', default pass to 'secret'.


networks:
  container_net:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 172.16.238.0/24

```

### コンテナ起動
```bash

# コンテナビルド
docker-compose build

# コンテナ起動
docker-compose up -d

# コンテナ起動確認
docker-compose ps
$ docker-compose ps
                     Name                                    Command               State                         Ports
---------------------------------------------------------------------------------------------------------------------------------------------
nishimu_containers_selenium-hub_1                 /opt/bin/entry_point.sh          Up      0.0.0.0:4444->4444/tcp
nishimu_containers_selenium-node-chrome-debug_1   /opt/bin/entry_point.sh          Up      0.0.0.0:32768->5900/tcp
php_web_container                                 /bin/sh -c /usr/sbin/httpd ...   Up      0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp, 8000/tcp

※Web(php_web_container), Hub(nishimu_containers_selenium-hub_1), Node(nishimu_containers_selenium-node-chrome-debug_1) のコンテナが立ち上がっていることを確認
```

### VNC起動
hostsに以下を設定

```
127.0.0.1 localhost
127.0.0.1 nishimu.com
```

[Finder]を右クリック→[サーバへ接続]を押下 →　`vnc://localhost:32768`
<img width="492" alt="スクリーンショット 2019-07-08 0.24.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400875/00bab45e-d8ad-4e0d-86ee-097698b260ef.png">
※画面共有で`nishimu_containers_selenium-node-chrome-debug_1`にVNC接続

### テストスクリプト
テキトーにリンクを押して、フォーム入力するスクリプトをKotlin作成。。

```kotlin
package com.nishimu.seleniumtest

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication
import org.openqa.selenium.remote.DesiredCapabilities
import org.openqa.selenium.remote.RemoteWebDriver
import java.net.URL


@SpringBootApplication
class SeleniumTestApplication

fun main(args: Array<String>) {
    runApplication<SeleniumTestApplication>(*args)

    val driver = RemoteWebDriver(URL("http://127.0.0.1:4444/wd/hub"), DesiredCapabilities.chrome())
    try {
        driver.run {

            // HOME
            get("http://nishimu.com/tp_biz48_skyblue/index.html")
            Thread.sleep(3000)
            findElementById("menu5").click()

            Thread.sleep(3000)

            // CONTACT
            findElementByName("お名前").sendKeys("テスト したろう")
            findElementByName("メールアドレス").sendKeys("test@example.com")
            findElementByName("お問い合わせ詳細").sendKeys("テストです！！！")
            Thread.sleep(3000)
            close()
            println("[INFO]:Test successfully passed!!")
        }
    } catch (e: Exception) {
        println("[ERROR]:" + e.message)
    } finally {
        driver.quit()
    }
}
```


### 実行結果
![SeleniumTest.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400875/d6440085-e09f-a6f7-283d-c5745b67a72d.gif)