Nightmareでブラウザを自動操作してE2Eテスト

NightmareでE2Eテスト

NightmareでE2Eテストを行います。
Mac上での開発を想定しています。

Nightmareとは？

JavaScriptでブラウザを操作できるツール。
内部にElectronを使っていて、実際にはこれがブラウザを操作する。
比較に上がるツールだと以下があるらしい（厳密な区別はわかりませんが、多分こんな感じ）

• Nightwatch
• Zombie
• Protractor
• WebdriverIO
• Karma

やること

Nightmareでブラウザを操作して、avaでテストをする。
※先にnpmやらnode.jsやらを使えるようにしておく

インストール

Mac上で作業場所を作って移動し、環境を作ります。
package.jsonを作る

package.json

	{
	  "name": "mightmare-test",
	  "version": "1.0.0",
	  "description": "",
	  "main": "index.js",
	  "scripts": {
	    "test": "ava --verbose test/"
	  },
	  "devDependencies": {
	    "ava": "*",
	    "electron": "*",
	    "nightmare": "*",
	    "vo": "*"
	  }
	}

　
インストール

$ npm install

インストールするライブラリの説明

Nightmare
Nightmare本体。
http://www.nightmarejs.org/

Electron
内包するエンジン。以前はPhantomJSだった。
Nightmareをインストールすると自動で入る。
https://electron.atom.io/

ava
JSのテストフレームワーク。ES6対応と非同期対応がウリ。
以前はJasminやmochaなどが有名だったけど、最近はこっちが多そう。
https://github.com/avajs/ava

テストを書く

testディレクトリを作って、その中にテストを作る

./test/test.js

	import test from 'ava';
	import Nightmare from 'nightmare';
	
	const nightmare = Nightmare({ show: true });
	
	test.serial('テスト', function * (t) {
	  const result = yield nightmare
	    .goto('http://www.google.co.jp/') // アクセス
	    //.wait(500)
	    .type('#lst-ib', "旭川")
	    //.wait(500)
	    .click('#_fZl') // idをクリック
	    //.wait(500)
	    .wait('#rcnt') // 要素が表示されるまで待つ
	    .evaluate(function () {
	      // 表示されたら要素を取得（広めに取る）
	      return document.querySelector('#rcnt').innerHTML;
	    });
	
	  // 取得した要素が想定と合っているかチェック
	  t.true(result.includes('旭川市'));
	});

実行してみる

実行すると、Electronが立ち上がって、自動で操作が始まります。
コンソール側にはテストの結果が表示されます。

$ npm test test