PHPUnitとSelenium WebDriverを使ってヘッドレスにブラウザテストを行う

■ 目次

  1. 概要
  2. 用語説明
    1. Selenium WebDriver
    2. facebook/php-webdriver
    3. Xvfb
    4. Selenium Server
  3. 環境構築
    1. php5.6
    2. PHPUnit
    3. Firefox
    4. Xvfb
    5. Java
    6. Selenium
  4. 起動
    1. Xvfb
    2. Firefox
    3. Selenium
  5. テスト実行
  6. 画面キャプチャ

■ 概要

PHPUnitを使ってSeleniumWebDriverを動かします

Linux(CentOS)上で動作させるためGUIのない環境ですが仮想端末上で動作させます

■ 用語説明

Selenium WebDriver

以下を参考にする

Selenium WebDriverとSelenium IDEなどについて

facebook/php-webdriver

Selenium WebDriverをPHPの言語で操作するためのライブラリ

Facebookの方が作ったもので公式ではないがSeleniumのテストを馴染みのあるPHPUnitで書くことができるようになる

Xvfb

最終的な目標としてはJenkinsなどでSeleniumテストを実行させたいと思っていて、そのためにSeleniumをヘッドレスに起動させる必要がある

XvfbはX Window Systemの画面入出力をシミュレートするのでディスプレイのないCentOS上でも、仮想上でブラウザを立ち上げてSeleniumテストを実行できるようになる

Selenium Server

公式で用意しているライブラリのほとんどはドライバを自動で起動する機能を持っているが、facebook/php-webdriverなど対応していないライブラリもある

Selenium Serverはクライアントとブラウザドライバの中継サーバーとして振る舞うのでクライアントライブラリがドライバの管理をする必要がなくなる

後術するがこれを起動させるにはselenium-server-standalone-XXX.jar(Java形式)というファイルを用意して起動する必要がある

実際に「Getting started」に必要なことが書かれている
https://github.com/facebook/php-webdriver

■ 環境構築

開発環境

$ cat /etc/redhat-release
CentOS release 6.8 (Final)

php5.6

// EPELリポジトリ追加
$ sudo yum install epel-release
// Remiリポジトリ追加
$ sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
// php5.6インストール
$ sudo yum install --enablerepo=remi,remi-php56 php php-devel php-mbstring php-pdo php-gd php-xml
// ついでに文字化け対策
$ sudo yum install ipa-pgothic-fonts.noarch

PHPUnit

composer install

$ sudo bash -c "curl -sS https://getcomposer.org/installer | php"
$ sudo mv composer.phar /usr/local/bin/composer

composerを使ってPHPUnitを用意する

$ cat composer.json
{
	"require-dev": {
		"phpunit/phpunit": "^5.4",
		"facebook/webdriver": "^1.1"
	}
}
$ composer install

Firefox

今回はFirefoxのブラウザを使ってテストを行うのでFirefoxをインストールする

$ sudo yum -y install firefox

Xvfb

FirefoxをGUI環境がないサーバーでも起動させるための仮想フレームバッファであるXvfbをインストール
$ sudo yum -y install xorg-x11-server-Xvfb

Java

Selenium起動時にJavaがひつようなのでインストールする

$ sudo yum install java
// 執筆時に試してjava-1.8.0-openjdkが入った

Selenium

http://www.seleniumhq.org/download/
でどんなバージョンがあるのかを調べつつインストールする

$ wget http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.1.jar
// 執筆当時は3.0.0-beta1が最新(ベーダだけど)だったが2.53.1を使うことにしている

■ 起動

Xvfb

// 立ち上げる
$ sudo Xvfb :1 -screen 0 1024x768x24
// 起動確認
$ ps aux | grep Xvfb | grep -v grep
root 407 0.0 0.5 73480 2596 pts/0 S 18:20 0:00 sudo Xvfb :1 -screen 0 1024x768x24
root 408 0.0 2.9 129848 13860 pts/0 S 18:20 0:00 Xvfb :1 -screen 0 1024x768x24

Selenium

$ export DISPLAY=:1
// オプションでFirefoxのパスを指定する
$ sudo java -jar selenium-server-standalone-2.53.1.jar -port 4444 -Dwebdriver.firefox.bin=/usr/bin/firefox
... 出力は中略 ...
19:11:16.316 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
19:11:16.316 INFO - Selenium Server is up and running

ここまでの動作確認として
http://{サーバのホスト名 or IP}:4444/wd/hub
にアクセスして「create session」からセッションを作れることを確認する

■ テスト実行

サンプルテストコードを用意する

$ cat tests/firefoxTest.php
<?php
use Facebook\WebDriver;
use Facebook\WebDriver\WebDriverExpectedCondition;
use Facebook\WebDriver\WebDriverBy;
use Facebook\WebDriver\Remote;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;

class firefoxTest extends PHPUnit_Framework_TestCase 
{
    public function testWebUI()
    {
        // ドライバーの起動
        $host = 'http://localhost:4444/wd/hub';
        $driver = RemoteWebDriver::create($host, DesiredCapabilities::firefox());

        // テストページへ遷移
        $driver->get('https://www.google.co.jp/');

        // 「Google」というタイトルを取得できることを確認する
        $title = $driver->getTitle();
        $this->assertEquals("Google", $title);

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

実行して問題がないことを確認する

$ ./vendor/bin/phpunit tests/firefoxTest.php
PHPUnit 5.4.8 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 17.87 seconds, Memory: 3.00MB

OK (1 test, 1 assertion)

わざと失敗するテストを作ってみる
上記のサンプルコードで敢えてタイポする

-        $this->assertEquals("Google", $title);
+        $this->assertEquals("Googlee", $title);

実行してエラーになることを確認する

$ ./vendor/bin/phpunit tests/firefoxTest.php
PHPUnit 5.4.8 by Sebastian Bergmann and contributors.

F                                                                   1 / 1 (100%)

Time: 19.02 seconds, Memory: 3.50MB

There was 1 failure:

1) firefoxTest::testWebUI
Failed asserting that two strings are equal.
--- Expected
+++ Actual
@@ @@
-'Googlee'
+'Google'

/home/tomsato/tests/firefoxTest.php:23

FAILURES!
Tests: 1, Assertions: 1, Failures: 1.

■ 画面キャプチャ

スクリーンショットを取得することができる
取得するにはImageMagickもが必要?

$ sudo yum install ImageMagick

ソースには以下を記述することによって取得できる

+        $driver->takeScreenshot('/tmp/tmp.png');

PHPUnitを実行した後にファイルが作成されることを確認


Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です