Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@haruna-nagayoshi

PHP + phpunit + php-webdriver + docker-selenium でブラウザテスト ①環境構築

目次

PHP + phpunit + php-webdriver + docker-selenium でブラウザテスト ①環境構築
PHP + phpunit + php-webdriver + docker-selenium でブラウザテスト ②テスト実行、エラー対策

概要

seleniumに自動でブラウザテストをしてもらって楽したい。
どうせならDockerで環境構築したい。
これを実現するために調べてわかったこと、詰まっていることをまとめました。

注意

  • phpunit/phpunit-seleniumというライブラリでもブラウザテストを実行できるようですが、やり方がわからなかったため深く調べていません。
  • phpunitも、テストコードの書き方も、詳しくありません。勉強中です。詳しくないので、あとから見返すために丁寧に書きます。

動作確認環境

下記の環境で動作することを確認しました。

Windows10 Pro
PhpStorm 2019.2.3
Docker Desktop 2.1.0.5
Docker 19.03.5
PHP 7.2 (dockerコンテナ)
composer 1.9.1 (dockerコンテナ)
Google Chrome 78.0.3904.70 (dockerコンテナ) ※1
Selenium Grid 3.141.59 (dockerコンテナ)  ※2

※1 chromeコンテナ内で、google-chrome --version で確認できる。もしくは※2の方法でも可能。
※2 コンソール画面で確認できる。
http://localhost:{割り当てたポート番号}/grid/console 

Dockerで環境構築

Dockerについて補足

DockerコマンドやDockerfileなどについては細かく説明しません。以下の記事を参照してください。
Dockerで環境構築するための最低限の概念理解
Dockerで環境構築するための最低限のコマンドを一通り実践する

docker-compose.ymlを作成

ルートディレクトリ配下にdocker-composer.ymlを作成します。
(docker-compose.ymlや後述のDockerfileのディレクトリ配置を変更する場合、
docker-compose.ymlの buildvolumes を修正する必要があることを忘れないでください。私はよく忘れる...)

sample/
    └─ docker-compose.yml
version: "3"
services:
  selenium-hub:
    image: selenium/hub:3.141.59-xenon
    container_name: selenium-hub
    ports:
      - 4444:4444  # ポート番号は競合しなければ好きな番号でOK。ただしnodeのHUB_PORTと一致させる。

  chrome:
    image: selenium/node-chrome-debug:3.141.59-xenon
    container_name: chrome
    ports:
      - 5900:5900  # ポート番号は競合しなければ好きな番号でOK 
    links:
      - selenium-hub
    volumes:
      - /dev/shm:/dev/shm
    depends_on:
      - selenium-hub
    environment:
      - HUB_HOST=selenium-hub
      - HUB_PORT=4444

  php:
    container_name: php
    build: ./docker/php
    volumes:
      - .:/var/www/html
    working_dir: /var/www/html
    entrypoint: php

  composer:
    container_name: composer
    build: ./docker/composer
    volumes:
      - .:/var/www/html
    working_dir: /var/www/html
    entrypoint: composer

selenium-hub、chromeのnodeコンテナは、docker-seleniumのイメージを利用しました。
VNCサーバでSeleniumが実際に動いている様子を見る必要がない場合は、node-chromeイメージを使います。
サイボウズエンジニアのブログ Docker で Selenium Grid の環境構築をもっと楽に!より

VNC サーバーが入っていると、Selenium テストが流れている様子を確認するのに便利なので、今回は debug 版のイメージを使用します。

※この記事ではChromeのnodeを使って説明します。Firefoxでテストしたい場合はFirefoxのイメージを使えばOK
調べている間にイメージのバージョン(元素記号)が変わっている...。Chromeのバージョンアップなどに合わせているんだろうか。
2019年12月25日時点の最新バージョンは3.141.59-yttrium

次に、phpコンテナ・composerコンテナの基になるDockerfileを作成します。

sample/
    ├─ docker-compose.yml
    └─ docker/
         └─ composer
            └─ Dockerfile
         └─ php
            └─ Dockerfile 

php/Dockerfile

FROM php:7.2

WORKDIR /tmp
RUN apt-get update && \
     apt-get install -y \
         curl libzip-dev zlib1g zlib1g-dev \
         && docker-php-ext-install zip

RUN curl -sS https://getcomposer.org/installer | php
RUN mv composer.phar /usr/local/bin/composer
RUN composer self-update
RUN composer global require hirak/prestissimo

VOLUME ["/var/www/html"]
WORKDIR /var/www/html

ENTRYPOINT ["composer"]
CMD ["--help"]

composer/Dockerfile

※後ほどphp-webdriverをcomposer requireする際、「zipエクステンションが必要です」と言われるので先に追加しておきます。

FROM php:7.2
RUN apt-get update && \
     apt-get install -y \
         curl libzip-dev zlib1g zlib1g-dev \
         && docker-php-ext-install zip

ここまで作成したら、環境が整ったかどうか確認します。
docker-compose.ymlが置いてあるディレクトリ(ここではルートディレクトリ直下)で、以下のコマンドをたたき、dockerコンテナを起動します。

$ docker-compose up -d --build

dockerコンテナが無事に起動したら、
http://localhost:{selenium-hubコンテナで設定したポート番号}/grid/console
にアクセスします。

今回の例では、
http://localhost:4444/grid/console
です。

画像のようなコンソール画面が表示されればOK。
image.png
これで、Dockerコンテナの準備が完了しました。

参考

docker-selenium
サイボウズエンジニアのブログ Docker で Selenium Grid の環境構築をもっと楽に!
docker-selenium 使って見た
docker-selenium+phpで簡単E2Eテスト環境構築
備忘録 Dockerを利用してSeleniumのテスト環境を作る&WebDriverを使ってみる。
Dockerコンテナのフロントテスト環境構築(Selenium-Grid×docker-compose)
Selenium 環境構築

phpunitとphp-webdriverをインストール

composer require

PHPでユニットテストを行うにはphpunitが必要です。
また、PHPでSeleniumを動かし、ブラウザを操作するには専用のドライバーが必要です。
公式ではPHP用のドライバーがないので、 facebook/php-webdriverを使います。
ルートディレクトリ直下でcomposer requireします。

$ docker-compose run --rm composer require phpunit/phpunit --dev
$ docker-compose run --rm composer require facebook/webdriver --dev

composer.jsoncomposer.lock が自動で生成され、2つのライブラリがインストールされました。

sample/
    ├─ composer.json ←これと
    ├─ composer.lock ←これ
    ├─ docker-compose.yml
    └─ docker/
         └─ composer
            └─ Dockerfile
         └─ php
            └─ Dockerfile 

phpunit.xml.distを作成

phpunitは、XML 設定ファイルを使って設定を変更できます
phpunit.xml.distというファイルを作成し、ルートディレクトリ直下に配置してください。

sample/
    ├─ composer.json
    ├─ composer.lock
    ├─ docker-compose.yml
    ├─ phpunit.xml.dist ←これ
    └─ docker/
         └─ composer
            └─ Dockerfile
         └─ php
            └─ Dockerfile 
<?xml version="1.0" encoding="UTF-8"?>

<phpunit bootstrap="tests/bootstrap.php"
         backupGlobals="false"
         backupStaticAttributes="false"
         verbose="true"
         colors="true">
    <testsuites>
        <testsuite name="app">
            <directory suffix="Test.php">tests</directory>
        </testsuite>
    </testsuites>
</phpunit>

ドキュメントを確認しながら、必要であれば設定を加えます。
ここでは、下記の項目について設定しました。設定しなくてもたぶん動きます(未確認)。

項目 内容
backupGlobals trueのとき、グローバル変数の保存や復元を、すべてのテストで完全に無効にする。デフォルトはfalse。
backupStaticAttributes trueのとき、宣言されたクラス内のすべての static プロパティの値をバックアップしてからテストを始め、 テストが終わった後でそれらの値を復元することができる。
verbose trueのとき、より詳細な情報を出力する。例えば、 未完成のテストや省略したテストの名前が表示される。
colors 出力結果に色を使用する。

bootstrap.phpを作成

bootstrap.phpというファイルを作成し、testsディレクトリ直下に配置してください。

sample/
    ├─ composer.json
    ├─ composer.lock
    ├─ docker-compose.yml
    ├─ phpunit.xml.dist
    ├─ docker/
    │  └─ composer
    │     └─ Dockerfile
    │  └─ php
    │         └─ Dockerfile 
    └─ tests/
      └─ bootstrap.php/ ←これ

<?php

$loader = require dirname(__DIR__).'/vendor/autoload.php';

クラスなど追加したらcomposer install してください。
(どのタイミングでcomposer installしないといけないか忘れた。ファイルは作ったのにテスト実行時に「クラスが無い」とか言われたらcomposer installしたり、namespaceが正しいかどうか確認してください)

$ docker-compose run --rm composer install

phpunitとphp-webdriverの準備ができたら、あとはテストコードを書いて実行するだけです。

PHP + phpunit + php-webdriver + docker-selenium でブラウザテスト ②テスト実行、エラー対策

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?