CodeceptionでPhantomJSによるブラウザテストをしてみる。

Dockerの続きを書こうとしましたが、結局MySQLのコンテナくらいしか使ってないので今回は自動テストについてちょっと書いてみようと思います。

自分は深く関わってないのですが、他案件で「PhantomJS」を使っているプロジェクトがあるので、PhantomJS（というかSelenium Webdriver）を使ったブラウザテストを行えるものを調べてみました。

e2infoではPHPの案件が多いので、PHPでテストコードをかけるものが皆やりやすいだろうと思って探してみたところ、「Codeception」というのがなかなか良さげだったので軽く試してみました。

この「Codeception」、ブラウザを使った受け入れテストだけでなく、単体テスト、機能テストを含めた各種テストが可能です。Laravelも含めたフレームワーク連携機能も豊富なようです。

Codeceptionはcomposerからインストールできます。任意のディレクトリで以下コマンドでインストールできます。

composer require "codeception/codeception"

上記コマンドでvendorディレクトリができますが、同一階層で以下初期化コマンドを実行すれば、Codeception用の設定ファイルや各種フォルダが生成されます。

./vendor/bin/codecept bootstrap

今回はPhantomJSを用いた受け入れテストを行いたいので、その設定を行います。PhantomJS自体のインストールについては割愛します。CodeceptionでPhantomJSを使うために、専用のExtensionをcomposerで追加インストールします。

composer require site5/phantoman

Extensionのインストールが終わったら、全体用の設定ファイル「（プロジェクトルート）/codeception.yml」にExtensionを使用するための設定を追記します。

actor: Tester
paths:
    tests: tests
    log: tests/_output
    data: tests/_data
    support: tests/_support
    envs: tests/_envs
settings:
    bootstrap: _bootstrap.php
    colors: true
    memory_limit: 1024M
extensions:
    enabled:
        - Codeception\Extension\Phantoman
    config:
        Codeception\Extension\Phantoman:
            path: '/usr/local/bin/phantomjs'
            port: 4445
            suites: ['acceptance']
modules:
    config:
        Db:
            dsn: ''
            user: ''
            password: ''
            dump: tests/_data/dump.sql

上記YAMLファイルのextensions:〜がPhantomJSを受け入れテスト（acceptanceと呼ばれているようです）で使用するための設定です。その他はとりあえず初期設定のままです。pathについてはPhantomJSのインストールパスを指定します。（Macの場合はwhich phantomjsでわかります）

次に受け入れテスト(acceptance)用の設定を行います。「(プロジェクトルート）/tests/acceptance.suite.yml」を修正します。

class_name: AcceptanceTester
modules:
    enabled:
        - \Helper\Acceptance
        - WebDriver:
            url: 'https://blog.e2info.co.jp'
            browser: phantomjs
            port: 4445

urlにはテスト対象の起点となるURL、browserにはphantomjsを指定します。portはcodeception.ymlで指定したものと同じ値とします。

簡単なテストケースで試してみます。全くテストになりませんが、イーツーインフォブログのトップページでメンバー名が表示されているかを確認してみましょう。

下記コマンドでテストケースを生成します。

./vendor/bin/codecept generate:cept acceptance Top

するとPHPファイル「(プロジェクトルート）/tests/acceptance/TopCept.php」が生成されますので、以下のように編集します。

<?php
$I = new AcceptanceTester($scenario);
$I->wantTo('メンバー確認');
$I->amOnPage('/');
$I->expect('中村がみたい');
$I->see('中村 祐太');
$I->expect('宇都宮もみたい');
$I->see('宇都宮 翼');

書いたら実行してみます。以下コマンドで受け入れテストが実行されます。

$ ./vendor/bin/codecept run acceptance --steps
Codeception PHP Testing Framework v2.2.9
Powered by PHPUnit 4.8.35 by Sebastian Bergmann and contributors.


Starting PhantomJS Server
Waiting for the PhantomJS server to be reachable.
PhantomJS server now accessible


Acceptance Tests (1) ---------------------------------------------------------------------------------------------------------------------------------
TopCept: メンバー確認
Signature: TopCept
Test: tests/acceptance/TopCept.php
Scenario --
 I am on page "/"
 I expect 中村がみたい
 I see "中村 祐太"
 I expect 宇都宮もみたい
 I see "宇都宮 翼"
 PASSED 

------------------------------------------------------------------------------------------------------------------------------------------------------


Time: 2.48 seconds, Memory: 12.25MB

OK (1 test, 2 assertions)
Stopping PhantomJS Server.
PhantomJS server stopped

実際はテスト成功すれば各所がグリーンでわかりやすく表示されます。
本格的に使うのにはCest形式だのページオブジェクトパターンだのを考慮したほうが良いのでしょうが、今回は紹介のみなのでここまでとします。

ちなみにこのブログの管理画面へのログインをCest形式とページオブジェクトを使ってテストを試しに書いてみましたが、調子に乗りすぎてアカウントロックされてしまいました。

テスト