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形式とページオブジェクトを使ってテストを試しに書いてみましたが、調子に乗りすぎてアカウントロックされてしまいました。