protractor (webdriver-js ラッパ) を使う

protractor は Angular.JS 用のエンドトゥーエンドテストフレームワークで、いろいろ環境を一発でつくるのが便利なので使ってる。Angular.JS も使ってるから丁度いい。

コマンドラインから Chrome App を起動すると、まず1つ普通のChromeのウィンドウが開き、次にアプリケーションのウィンドウが開くという挙動をする。なので、アプリケーションのウィンドウが起動するのを待って、そっちにスイッチする必要がある。

403 Forbidden このあたりに書いてあるのをなおして、以下のようなのを書いた。

function switchToAppWindow (nth) {
	function _switchToAppWindow (n) {
		if (n <= 0) throw "failed to switch to app window";

		browser.driver.getAllWindowHandles().then(function (handles) {
			if (handles.length <= nth) {
				_switchToAppWindow(n--);
			} else {
				browser.driver.switchTo().window(handles[nth]);
			}
		});
	}
	_switchToAppWindow(1000);
}

switchToAppWindow(1) で2番目に生成されたウィンドウにスイッチできる。

これで、Angular.JS レベルでの E2E テストは書けるようになる

Unit テストを書く

しかし、E2E テストだと Chrome 向けに Chrome 専用の API を使ったライブラリのテストが書きにくいので、普通の Unit Test みたいなのも書きたくなる。

いろいろ試したけど、結局以下のようにした。

• テスト用の .html を用意する
• E2E テスト用のスクリプトから、executeScript でテスト用の .html を開き、テストを実行する

Jasmine を読みこませてテストを実行させ、自力でテスト結果を取得して表示してる。

ただ、罠があって、Jasmine が eval を使っててそのままだと Content Security Policy にひっかかって実行できない。これはmanifest.json に sandbox 指定することでも解決するけど、これだと本来の目的の API がたぶん使えないので、jasmine を書きかえて治す必要がある。global オブジェクトを取得しようとして eval を使っているので (なんで?) そこだけ自分で変えたら動く (Edge バージョンだと eval するコードがないので普通に動きそう)。

スケルトンプロジェクト

をつくった

• https://github.com/cho45/chrome-app-skeleton/tree/master