phantomjsでログイン画面をテストする

phantomjsでログイン画面のテストをやってみました。

インストール

cd /var/www/myproject npm install --save-dev phantomjs

テストファイル作成

// include
var base = require(phantom.libraryPath + '/base.js');

// setting
phantom.cookiesEnabled = true;
phantom.javascriptEnabled = true;

// set page
var page = require('webpage').create();

// ログイン画面
base.page_open(page, 'https://exzample.com/login', function(){

    page.evaluate(function(){
        $('input[name="email"]').val('aho@exzample.com');
        $('input[name="password"]').val('aho');
        $('input[type="submit"]').click();
    });

    // レンダリングが完了するまで待つ
    setTimeout(function (){
        page.render('hoge.png');
        phantom.exit();
    }, 10000);
});

// jquery URL
var jquery_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';

exports.page_open = function(page, url, callback){

    page.open(url, function(status){
        if(status != 'success'){
            console.log('[ERROR] ' + status);
            phantom.exit();
        };

        page.includeJs(jquery_url, function(){
            callback();
        });
    });
}

実行

node_modules/phantomjs/bin/phantomjs assets/js/phantomjs/test.js

・SSLエラーが出て正常に表示できない場合このオプションを追加 node_modules/phantomjs/bin/phantomjs --ignore-ssl-errors=true assets/js/phantomjs/test.js

テストしてたらclickイベントが効かないな～と思ったことがあったのですが、多分jQueryがロードされるページでpage.includeJsを使ってjQueryをロードすると競合してうまく動作しないかも？です。

以上、phantomjsのログイン画面テストでした。 次は画面遷移いっぱい出来るヤツを作ろうと思います。