search
LoginSignup
93

More than 5 years have passed since last update.

posted at

CasperJSでWeb GUIテスト

CasperJSは、ヘッドレスブラウザのPhantomJSを使ってブラウザ操作やテストができるライブラリ。
WebテストのデファクトであるSeleniumやそのGroovyラッパーのGeb(これが一番おすすめ)に比べて、インストールが簡単で、動作の軽量なのが特徴。
以下のデメリットもありますが、軽いWebシステムには相性がよい。

  • クロスブラウザができない(PhantomJSベースなので当たり前)
  • Gebと比べると気が利かない
  • 入れ子が多くなって気持ち悪い(Coffee Scriptを使えばいい?)

CasperJSのドキュメント

インストール

Macならコマンド一発。win用に簡単に説明。

参考:http://qiita.com/ledsun@github/items/d55e83d41a4435755fcd

chocolateyのインストール

コマンドプロンプトで以下を実行
参考:https://chocolatey.org/

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

PhantomJSのインストール

コマンドプロンプトで以下を実行

cinst phantomjs

コマンドプロンプトを再起動して以下で確認

phantomjs --version

CasperJSのインストール

ダウンロード

http://casperjs.org/
から【1.1-beta3】をダウンロード。
※stable versionだとwin対応されてないので注意!
※chocolateyにもあるけど、1.1はないみたい。

回答したフォルダを好きなところにコピー。
(以下、C:\CasperJS にコピーした前提で説明します。)

パスの設定

システムの詳細設定
=>環境変数
=>Path
=>編集
=>行頭に以下を追記

C:\CasperJS\bin

確認

コマンドプロンプトを再起動して、以下で確認

casperjs --version

実行の仕方

実行(テストなし)

casperjs foo.js

実行(テストあり)

casperjs test foo.js

基本処理

画面を開いてキャプチャーをとる

var casper = require('casper').create();
casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

casper.start('../../introWork/introWork1.html', function(){
    this.capture('out/intro_work_1.png');
});

casper.run();

クリックする

this.click('#ok_button');のようにCSSセレクターを使って要素を選択できる。

var casper = require('casper').create();
casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

casper.start('../../introWork/introWork2.html', function(){
    this.click('#ok_button');
    this.capture('out/intro_work_2.png');
});

casper.run();

文字列を入力する

this.sendKeys('#subject', 'Selenium', {reset: true});
第1引数が要素のCSSセレクター、第2引数が文字列、第3引数がオプション(この場合は入力済みの文字をリセットする)。

var casper = require('casper').create();
casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

casper.start('../../introWork/introWork3.html', function(){
    this.sendKeys('#subject', 'Selenium', {reset: true});
    this.capture('out/intro_work_3.png');
});

casper.run();

ラジオボタンを選択する

クリックでいけますね。

var casper = require('casper').create();
casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

casper.start('../../introWork/introWork4.html', function(){
    this.click('#on_radio');
    this.capture('out/intro_work_4.png');
});

casper.run();

チェックボックスを選択する

if(!this.getElementAttribute('#allowed_check', 'checked'))部分がポイント。
チェックされているかを判定。

var casper = require('casper').create();
casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

casper.start('../../introWork/introWork5.html', function(){
    if(!this.getElementAttribute('#allowed_check', 'checked')){
        this.click('#allowed_check');
    }
    this.capture('out/intro_work_5.png');
});

casper.run();

プルダウンを選択する

var casper = require('casper').create();
casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

casper.start('../../introWork/introWork6.html', function(){
    this.fillSelectors('form', {'#head_count': '5'});
    this.capture('out/intro_work_6.png');
});

casper.run();

Assertion

start, then, runのように実施する。

casper.test.begin('introWork7', 1, function suite(test) {
    casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

    casper.start('../../introWork/introWork7.html', function() {
        this.capture('out/intro_work_7.png');
    });

    casper.then(function() {
        test.assertSelectorHasText('#total', '9000');
    });

    casper.run(function(){
        test.done();
    });
});

PageObjectデザインパターン

PageObjectデザインパターンって?

PageObject

入れ子になっていて気持ち悪いけど、基本的にはページに関する処理をラップしているだけ。

function FooPage() {

    this.capture = function(name){
        casper.then(function(){
            this.capture(name);
        });
        return this;
    };

    this.startPage = function() {
        casper.start('foo.html');
        return this;
    };

    this.setBar = function(bar) {
        casper.then(function() {
            this.sendKeys('#bar', bar, {reset: true});
        });
        return this;
    };

    this.goToNext = function() {
        casper.then(function(){
            this.click('#goto_next');
        });
    };
}

PageObjectを使う

PageObjectを作ってしまえば、メソッドチェーンで処理を書いていけばいい。

phantom.page.injectJs('pages/foo_page.js');

var fooPage = new FooPage();

casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53');

casper.test.begin('PageObjectTest', function suite(test) {
    fooPage.startPage()
        .capture('out/foo.png')
        .setBar('bar')
        .goToNext();

    casper.run(function() {
        test.done();
    });
});

Coffee Script

Coffee対応しているので、Coffeeを使うと簡潔に書けますね。
(書いたことないけど。。。)

参考

STARの教材をCasperJSで書きなおしたソースが以下。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
93