CakePHP2.xとBehatとSelenium2とPhantomJSでJavascriptアラートをテストする方法

Behat(Bddプラグイン)とSeleniumでJavascriptのアラートをチェックする方法がやっとわかったので、メモ。
情報はボチボチでていたものの、タイトルに有るような環境でのビッタリな答えが見つけられなかったので、自分なりに試行錯誤した結果です。

結果から言うと、「テストは可能だがちょっと無理やり感がある」って感じでした。
Selenium2だけだと、Javascriptのアラート関係に対応していなかったので、
ヘッドレスブラウザのPhantomJSで実現します。

インストールするもの

• Behat
• Mink
• Selenium2WebDriver
• PhantomJS

手順

1 初期化します

$ app/Console/cake Bdd.story

2 featureを書きます

  もし jsで "/xxxx/xxxx/" を表示している
  ならば jsでアラートの文字が "名前を入力して下さい" となっているかチェックする

3 ステップファイルを作ってコードを書く（steps/step_xxx.php）

$steps->Given('/^jsでアラートの文字が "([^"]*)" となっているかチェックする$/', function($world, $arg1) {
    if(!$world->checkAlertMessage($arg1)) {
        // テストが通らなかったら、エラーを投げる
        throw new ErrorException();
    }
});

4 実際の処理を[bootstrap/FeatureContext.php]に書きます

function __constructに以下を。

// ドライバの初期化
$host = CI_HOST . ":8910/wd/hub";
$browser = "phantomJS";
$this->gui = new Mink(array(
'javascript' => new Session(new Selenium2Driver($browser, null, $host)),
));

適当な場所に以下の2つのメソッドを書く。

// Javascriptでアラートの文字を拾う準備をする
public function presetGetAlertMessage()
{
    // Alertの文字を拾う（クリックの前に入れておく）
    $this->gui->getSession('javascript')->getDriver()->evaluateScript(
    "
    (function () {
        var lastAlert = undefined;
        window.alert = function (message) {
            lastAlert = message;
        };
        window.getLastAlert = function () {
            var result = lastAlert;
            lastAlert = undefined;
            return result;
        };
    }());
    "
    );
}

// Javascriptのアラートメッセージをチェック
public function checkAlertMessage($message)
{
    $getMessage = $getMessage = $this->gui->getSession('javascript')->getDriver()->evaluateScript(
        "return window.getLastAlert()"
    );
    // チェック
    if($getMessage === $message) {
        return true;
    } else {
        return false;
    }
}

5 PhantomJSを起動する

$ phantomjs --webdriver=8910

phantomjsは、バックグランド実行するか、別窓コンソールで実行する

6 Behatを実行する

$ ./app/Console/cake Bdd.story

##ポイントはブラウザの切り替え

ブラウザの概念がわからなかったのですが、要は、もともとあったテスト用ブラウザ（Firefoxかな？）と、PhantomJSというブラウザの２枚があり、前者だと、Javascriptがうまく使えない。なので、都度ブラウザをPhantomJSに変えましょう、ということらしい。

今回だと、「jsで〜」とつけたものはPhantomJSで実行するように作った。
ブラウザが変わると、もちろんデータ等は保持されないので、エラーがでまくる。
その辺がわからずにずっとハマってしまっていました。

参考書籍・サイト

• CakePHPで学ぶ継続的インテグレーション（これを元に構築しています）

• Selenium 使いのための PhantomJS 解説 - Qiita