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

Published: 2016年7月31日 by tomsato

概要

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を実行した後にファイルが作成されることを確認

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧