Zombie.jsでクライアントサイドのテストしてみる

Zombie.js is headless browser.

Zombie.jsはnode.jsで動くクライアントサイトテストフレームワーク。またはユーザーインターフェースを持たないブラウザです。
コレを使ってクライアントサイドのテストが書けます。

Hello Zombie.js

すっごく簡単に使ってみる。（神戸蘭子のアメブロ見てtitleタグ確認するだけ。）

	var Browser = require("zombie");
	var assert = require("assert");
	browser = new Browser();
	browser.on('error', function(error) {
	console.log(error);
	});
	// Load the page from AmebaBlog.
	browser.visit("http://ameblo.jp/ran-ran-k/", function (err, browser, statusCode) {
	// Return true if the status code is 2xx.
	assert.ok(browser.success);
	// Return the text contents of the selected elements.
	assert.equal(browser.text('title'), '神戸蘭子オフィシャルブログ「神戸蘭子の☆diary☆」by Ameba');
	});

view raw hello-zombie.js hosted with ❤ by GitHub

こんな感じ。

browser.successでstatusCodeが200かどうかをnodeのAPI、assert.okを使ってチェック。
browser.textでCSSセレクタ使って見つけたエレメントを取得して、assert.equalでチェック。

その他

form入力とかもできる。

	browser.
	fill("email", "zombie@underworld.dead").
	fill("password", "eat-the-living").
	pressButton("Sign Me Up!", function() {
	// Form submitted, new page loaded.
	assert.ok(browser.success);
	assert.equal(browser.text("title"), "Welcome To Brains Depot");
	})

view raw zombie-form.js hosted with ❤ by GitHub

pressButtonとか、clickLinkとか、色んなAPIがあるみたい。

調べてる途中なのだけど、JavaScript使ってDOM生成したエレメントが見れないぽい。。

どうやったらええんや…。