Docker × PHP × Selenium으로 E2E 쉬운 구축

자동으로 할 수 있는 E2E 테스트를 docker와 selenium을 사용해 구축하는 방법을 소개합니다.

환경

macOS Catalina 10.15.2

Docker 버전 19.03.5

docker-compose version 1.25.2

phpunit/phpunit: 8.5

php-webdriver/webdriver: 1.7(旧 facebook/webdriver はこちらに変わったようです)

구성

project
├── docker
│   └── test-server
│   │   └── Dockerfile
│   └── selenium-chrome
│       └── Dockerfile
├── docker-compose.yml
└── test-server
    ├── composer.json
    ├── composer.lock
    ├── vendor
    └── tests
        └── SampleTest.php

구축 절차

1. 디렉토리 생성

우선, 임의의 디렉토리(상기에서는 project)를 작성합니다.
바로 아래에 docker, test-server 디렉토리를 만듭니다.
test-server가 E2E 실행 서버가 되는 가정입니다.

2. docker-compose.yml 작성

test-server(E2E 테스트 실행 서버),selenium-chrome의 2개의 컨테이너를 상정하고 있으므로, 다음과 같이 됩니다.

docker-compose.yml

version: '3'

services:
  test-server:
    build: ./docker/test-server
    volumes:
      - ./test-server:/app

  selenium-chrome:
    build: ./docker/selenium-chrome
    ports:
      - 4444:4444
      - 5900:5900

3. Dockerfile 만들기

test-server/Dockerfile 작성

php 컨테이너 구축시에 사용되는 Dockerfile을 docker/test-server/에 작성합니다.

Composer 설치는 공식을 참조하십시오.ハッシュ値は頻繁に変わりますのでご注意ください。
Dockerfile

FROM php:7.3-fpm

RUN apt-get update \
 && apt-get install -y p7zip p7zip-full zip unzip zlib1g-dev libzip-dev
RUN apt-get install -y zlib1g-dev \
    && docker-php-ext-install zip

# composerインストール

WORKDIR /app
RUN chmod 0777 -R /app
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('sha384', 'composer-setup.php') === 'c5b9b6d368201a9db6f74e2611495f369991b72d9c8cbd3ffbc63edff210eb73d46ffbfce88669ad33695ef77dc76976') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

selenium-chrome/Dockerfile 만들기

이번에는 일본어 크롬을 사용할 수 있도록 설정합니다.

FROM selenium/standalone-chrome-debug:3.2.0-actinium

ENV LANGUAGE ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
RUN locale-gen ja_JP.UTF-8 \
  && dpkg-reconfigure --frontend noninteractive locales \
  && apt-get update -qqy \
  && apt-get -qqy --no-install-recommends install \
    language-pack-ja \
  && rm -rf /var/lib/apt/lists/* /var/cache/apt/*

4. docker-compose 시작

백그라운드에서 docker 시작

$ docker-compose up -d

5. composer를 사용하여 모듈 설치

// test-serverにインスペクション
$ docker-compose exec test-server bash

// composer.json作成(対話形式)
root@70116da5d1a0:/app# composer init

// モジュールのインストール
root@70116da5d1a0:/app# composer require phpunit/phpunit
root@70116da5d1a0:/app# composer require php-webdriver/webdriver

이런 느낌의 composer.json이 완성됩니다.composer.jsonを直接触ったりなんてやめてくださいね！
composer.json

{
    "name": "root/app",
    "require": {
        "phpunit/phpunit": "^8.5",
        "php-webdriver/webdriver": "^1.7"
    }
}

6. vnc 크롬 시작

PC 브라우저 (Google Chrome 등)에서 아래 URL을 방문해보십시오.vnc://localhost:5900

화면 공유 .app을 클릭하십시오.

암호 "secret"을 입력하고 "로그인"을 클릭하십시오.

그러면 다음과 같은 화면이 열립니다.

6. 샘플 테스트 스크립트 작성

샘플 때문에 테스트는 매우 간단합니다.

SampleTest.php

<?php

use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use PHPUnit\Framework\TestCase;
use Facebook\WebDriver\WebDriverExpectedCondition;
use Facebook\WebDriver\WebDriverBy;

class SampleTest extends TestCase
{
    /**
     * @group google
     */
    public function testGoogle()
    {
        // selenium
        $host = 'http://host.docker.internal:4444/wd/hub';
        // chrome ドライバーの起動
        $driver = RemoteWebDriver::create($host,DesiredCapabilities::chrome());
        // 指定URLへ遷移 (Google)
        $driver->get('https://www.google.co.jp/');
        // 検索Box
        $element = $driver->findElement(WebDriverBy::name('q'));
        // 検索Boxにキーワードを入力して
        $element->sendKeys('セレニウムで自動操作');
        // 検索実行
        $element->submit();

        // 検索結果画面のタイトルが 'セレニウムで自動操作 - Google 検索' になるまで10秒間待機する
        $driver->wait(10)->until(
            WebDriverExpectedCondition::titleIs('セレニウムで自動操作 - Google 検索')
        );

        //assert
        $this->assertEquals('セレニウムで自動操作 - Google 検索', $driver->getTitle());
        $this->assertEquals('セレニウムで自動操作', $driver->findElement(WebDriverBy::name('q'))->getAttribute("value"));

        // ブラウザを閉じる
        $driver->close();
    }
}

테스트 실행

// test-serverにインスペクション
$ docker-compose exec test-server bash

// テストの実行
root@70116da5d1a0:/app# vendor/bin/phpunit tests/SampleTest.php 

실행하면 다음과 같이 자동으로 테스트가 수행됩니다. (Chrome 일본어화하기 전의 gif가 됩니다.)

참고

docker-selenium+php로 간단 E2E 테스트 환경 구축

docker-selenium을 사용하여 본

Docker에서 일본어 Chrome에서 작동하는 selenium을 시작합니다.