webdriverjs + jasmine-nodeでWebテストをする。（普通のsubmit）

---
webdriver（selenium2)のテストはjavaで書いてきたが、APIはjsとになるので、ここはひとつjavascriptで書いてみみる。
画面を遷移させるデモがあまりなかったので、とりあえず実験。

###やりたいこと

login⇒入力⇒確認⇒サンキュー画面（DB保存）という基本的なWebの流れをテストする。
DB(mysql)にちゃんと格納されているかも確認する。
schreenshotも撮る（途中に書いてます）。

###そのうちやること

ajaxでの処理のテストも書く

###環境構築

jasmine-nodeは入っているとして、追加で、

```
sudo npm install -g selenium-webdriver
```

とする。chromewebdriverをインストールしろ！と言われた場合は、ダウンロードしてきて/usr/bin/にでも放り込む。

mysqlのモジュール入ってないなら入れる

```
sudo npm install -g mysql
```

###テストを書く

概念的に理解しなければならないのは、done。非同期処理はdoneの処理をうまくやらないとテストが実行されない。
node.jsはとにかく何でも非同期。beforeEach()やafterEach()は必要に応じて。

```test.spec.js
//webdriver
var webdriver = require("/usr/local/lib/node_modules/selenium-webdriver");

//mysql
var mysql = require("/usr/local/lib/node_modules/mysql");
var connection = mysql.createConnection({
    host:"localhost",
    database:"testdb",
    user:"dbuser",
    password:"password"
});

var driver = new webdriver.Builder()
	.withCapabilities(webdriver.Capabilities.chrome())
	.build();

describe('test sample',function(){

	beforeEach(function(){
		//connection.query("delete from members")
	});

	afterEach(function(){
		//
	});

	//正常系
	it('flow test',function(done){

		//ログイン画面///////////////////////////////////////////////////

		//ログイン画面呼び出し
		driver.get("http://localhost/flow/login.html");

		//ID,PW入力
		var id = driver.findElement(webdriver.By.id("id"));
		var pw = driver.findElement(webdriver.By.id("pw"));

		id.sendKeys("hoge");
		pw.sendKeys("foo");

		//ログインポタンクリック
		var login = driver.findElement(webdriver.By.id("btn_login"));
		login.click();

		//入力画面///////////////////////////////////////////////////////

		//ログイン後のタイトルチェック
		driver.getTitle().then(function(title){
			expect(title).toBe("input");
		});

		//必要事項入力
		var name = driver.findElement(webdriver.By.id("name"));
		var email = driver.findElement(webdriver.By.id("email"));

		name.sendKeys("tama");
		email.sendKeys("tama@test.com");

		//screen shot
		driver.takeScreenshot().then(function(img){
			require('fs').writeFile('./out.png',img,'base64',function(err){});
		});

		//nextボタン
		var next = driver.findElement(webdriver.By.id("btn_next"));
		next.click();

		//確認画面///////////////////////////////////////////////////////

		//移動先のタイトルチェック
		driver.getTitle().then(function(title){
			expect(title).toBe("confirm");
		});

		//内容チェック
		var name = driver.findElement(webdriver.By.id("name"));
		var email = driver.findElement(webdriver.By.id("email"));

		name.getText().then(function(text){
			expect(text).toBe("tama");
		});

		email.getText().then(function(text){
			expect(text).toBe("tama@test.com");
		});

		//entryボタンクリック
		var entry = driver.findElement(webdriver.By.id("btn_entry"));
		entry.click();

		//サンキュー画面//////////////////////////////////////////////////

		//移動先のタイトルチェック
		driver.getTitle().then(function(title){
			expect(title).toBe("thankyou");
		});

		//終了
		driver.quit().then(function(){
			//非同期実行
			done();
		});

	});

	//DBの保存を確認
	it('db check',function(done){

		//最新のレコード1件を取得し比較
		connection.query("select * from members order by id desc limit 1",function(err,results){

			var name = results[0].name;
			var email = results[0].email;

			expect(name).toBe("tama");
			expect(email).toBe("tama@test.com");

			//非同期実行
			done();

			//開放
			connection.end();

		});

	});

});
```

###その他　メモ

待ち時間等が必要な場合は、

```wait.js
driver.wait(function(){
	driver.getTitle().then(function(title){
		console.log(title);
	});
},1000);
```
などとする。

###テスト対象のHTML

単純ですが、HTMLの方も一応載せておきます。

```login.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>login</title>
</head>
<body>
<form action="input.php" method="post">
	<input type="text" id="id" name="id">
	<input type="text" id="pw" name="pw">
	<input type="submit" id="btn_login" value="login">
</form>
</body>
</html>
```

```input.html
<?

	$id = $_POST['id'];
	$pw = $_POST['pw'];

	if($id == "hoge" && $pw == "foo"){
		//
	}else{
		header("Location: login.html");
	}

?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>input</title>
</head>
<body>
<h3>input</h3>
<form action="confirm.php" method="post">
	<input type="text" id="name" name="name">
	<input type="text" id="email" name="email">
	<input type="submit" id="btn_next" value="next">
</form>
</body>
</html>
```

```confirm.html
<?

	$name = $_POST['name'];
	$email = $_POST['email'];

?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>confirm</title>
</head>
<body>
<h3>confirm</h3>
<div id="name"><?php echo $name; ?></div>
<div id="email"><?php echo $email; ?></div>
<form action="thankyou.php" method="post">
	<input type="hidden" name="name" value="<?php echo $name; ?>">
	<input type="hidden" name="email" value="<?php echo $email; ?>">
	<input type="submit" id="btn_entry" value="entry">
</form>
</body>
</html>
```

```thankyou.html
<?

	$name = $_POST['name'];
	$email = $_POST['email'];

	$dbh = new PDO("mysql:host=localhost;dbname=testdb","root","root");
	$stmt = $dbh->prepare("insert into members(name,email) values(:name,:email)");
	$stmt->bindParam(":name",$name);
	$stmt->bindParam(":email",$email);
	$stmt->execute();

?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>thankyou</title>
</head>
<body>
<h3>thankyou</h3>
<div id="message">thankyou</div>
</body>
</html>
```

dbは、id(primary key auto_incrementで）,name,emailを保存しているだけ。