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を保存しているだけ。