Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
93
Help us understand the problem. What are the problem?

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で書きなおしたソースが以下。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
93
Help us understand the problem. What are the problem?