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

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

やりたいこと

そのうちやること

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の方も一応載せておきます。

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

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