Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

必要なもの

  • 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テストができるということが分かりました。

皆さんもお試しあれ。

Arm4
PHP / JavaScript / Laravel / Vue.js Webアプリケーションエンジニア
http://arm4.hatenablog.com/
prime-order
組織と業務に変革をもたらす新しいカタチのシステム開発サービス
https://prime-order.jp/
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