前提

PhantomJS × CasperJSによるブラウザテスト の実質的な続き。

本記事について

CasperJSを用いたテストコードのうち、再利用性が高そうなものを整理する。本記事は定期的に加筆修正を行う

テストの雛形

1024×690のブラウザで特定URLにアクセス、ステータスコードとページタイトルを検証した後にスクリーンショットを撮影する

var url = '';

casper.start();
casper.test.begin('テストの雛形'  , function(test) {

  casper.open(url).viewport(1024, 690).then(function() {
    var expectStatus = 200;
    var expectTitle = '';
    test.assertHttpStatus(expectStatus , 'ステータスコードが200である');
    test.assertTitle(expectTitle , 'ページタイトルが正しく表示される');
  });

  casper.run(function() {
    test.done();
		this.capture('ss.png');
  });

});i

フォームへの入力とsubmit

registerFormに対して、useridにtestと入力してsubmitする。

casper.then(function() {
  this.fillSelectors("form[name='registerForm']", {
    "input[name=userid]": 'test'
  }, true);
});

なお、入力だけ行ってsubmitしない場合は、末尾のtrueをfalseに変えること

開いてるページへのJavaScript実行

該当ページに対してjQueryでDOMの値を入手し、それを検証する

casper.then(function() {
  var value = this.evaluate(function() {
    return $('h1').text();
  });
  test.assertEquals(value , '見出し');
});

evaluateメソッドで渡す関数の戻り値がevaluateメソッド自体の戻り値になる。
h1の要素ぐらいならCasperのメソッドで直接取得できます。実際はCasperのメソッドだけじゃ事足りない細かなスクリプトを実行したい場合に用いる

特定要素が表示されるまで待機する

セレクタでDOMを指定し、そのDOMが表示されるまで次のステップに行かずに待機する。
JavaScriptなどで動的にDOMを生成し、それに時間がかかるような場合に有用

casper.waitForSelector('#hoge', function() {
  // #hogeが表示されたら実行する
});

特定のテキストが表示されるまで待機する

ページ内に指定したテキストが表示されるまで、次のステップに行かずに待機する。
waitForSelectorより使い勝手良さそう

casper.waitForText("hoge", function() {
  // テキスト'hoge'が表示されるまで待機
});