Laravel5.2でPHPUnit使ってE2Eテストをする手順

必要なもの

• Mac
• Laravel5.2
  Laravelの別バージョンを使いたい場合はphpunit、phpunit-selenium、webdriverのバージョンを調整する必要があるかもしれない。
• selenium-server-standalone
  chromedriverを使うための中継サーバー
• chromedriver
  ChromeのAPIを呼び出すことでブラウザの操作を行うドライバ（Selenium WebDriver）
• phpunit
  Laravelに最初から付いてくるphpのユニットテストツール
• php-webdriver
  Selenium WebDriverをPHPで操作するためのライブラリ

selenium-server-standaloneをhomebrewでインストール

brew update
brew install selenium-server-standalone
selenium-server --version

selenium-server --versionを叩いて「javaコマンドラインツールを使用するには、JDKをインストールする必要があります」というエラーが出た場合はjavaのJDKをインストールしてください。

chromedriverをhomebrewでインストール

brew install chromedriver

Laravelアプリのcomposer.jsonを書き換えてパッケージをインストールする

• phpunit/phpunit ~5.0
• facebook/webdriver 1.2.0

※phpunitはLaravel5.2プロジェクト作成時にインストールされるバージョンよりアップグレードすることになります。

※phpunit-seleniumも使いたい人は以下のバージョンでインストールしてください。

• phpunit/phpunit-selenium 3.0.*

composer.json

    "require-dev": {
        "fzaninotto/faker": "~1.4",
        "mockery/mockery": "0.9.*",
        "phpunit/phpunit": "~5.0",
        "facebook/webdriver": "1.2.0",
        "symfony/css-selector": "2.8.*|3.0.*",
        "symfony/dom-crawler": "2.8.*|3.0.*"
    },

composer.jsonを書き換えたら、composer updateを実行。

composer update

とりあえずテストしてみる

ExampleTest.phpを適宜テストが通るように書き換えてから、アプリルートで実行。

./vendor/bin/phpunit tests/ExampleTest.php

緑色で「OK (1 test, 2 assertions)」と出れば無事にphpunitは使えてます。

BrowserTest.phpを作成

ExampleTest.phpをコピーしてBrowserTest.phpを作ります。

BrowserTest.php

<?php

use Illuminate\Foundation\Testing\WithoutMiddleware;
use Illuminate\Foundation\Testing\DatabaseMigrations;
use Illuminate\Foundation\Testing\DatabaseTransactions;

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 BrowserTest extends TestCase
{
    /**
     * A basic functional test browser.
     *
     * @return void
     */
    public function testBrowser()
    {
        // あらかじめselenium-serverを起動しておく必要がある
        $host = 'http://localhost:4444/wd/hub';

        // chrome ドライバーの起動
        $driver = RemoteWebDriver::create($host, DesiredCapabilities::chrome());

        // テストページへ遷移
        $driver->get('http://example.com');

        // .last-buttonが読み込まれるまで最大10秒待つ、その間500msでリトライする
        $driver->wait(10,500)->until(
            WebDriverExpectedCondition::presenceOfElementLocated(WebDriverBy::cssSelector('.last-button'))
        );

        // .modal-openボタンをクリック
        $driver->findElement(WebDriverBy::cssSelector('.modal-open'))->click();

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

selenium-serverを起動

テストを走らせる前に、ターミナルで別窓を開いてselenium-serverを起動しておく。

selenium-server

selenium-serverはデフォルトでポート4444で立ち上がるので、コード内でlocalhost:4444と指定している人はポートを指定する必要はない。

ポートに別の番号を割り当てた人は

selenium-server -p 8080

このようにしてポートを指定して立ち上げる。

E2Eテストを実行

./vendor/bin/phpunit tests/BrowserTest.php

バックグラウンドでブラウザが立ち上がり、自動でごちゃごちゃやってウィンドウを閉じ終わる。
そして、緑で「OK (1 test, 0 assertions)」と表示されたらテストは成功。

クリックする要素が見つからないなどのエラーがある場合は、
「ERRORS!
Tests: 1, Assertions: 0, Errors: 1.」とオレンジ色でエラーが表示される。

編集後記

ひとまずインストールしてテストができるところまで確認したので、これから実際にいろいろテストコードを書いて使い心地などを検証していくつもりです。

Laravel Duskが使えないLaravelのバージョンでも、このように自力で頑張って入れれば簡単にE2Eテストができるということが分かりました。

皆さんもお試しあれ。