やりたいこと
webdriverjsでalertやconfirmのあるUIを制御する方法。
ajaxでUI作った場合は必須。
テストを書く
alertもconfirmもdriver.switchTo()で取得する。そしてaccept(),dismiss()で対応。
ajax.spec.js
var webdriver = require("/usr/local/lib/node_modules/selenium-webdriver");
var driver = new webdriver.Builder()
.withCapabilities(webdriver.Capabilities.chrome())
.build();
describe('ajax test',function(){
it('alert',function(done){
//ページにアクセス
driver.get("http://localhost/js.php");
//ボタンを取得
var btn = driver.findElement(webdriver.By.id("btn"));
btn.click();
//とりあえずボタンクリック（空入力のまま）
var alert = driver.switchTo().alert();
alert.getText().then(function(text){
//console.log(text);
expect(text).toBe("何か入れて下さい。");
alert.accept();
});
//名前入力欄を取得
var name = driver.findElement(webdriver.By.id("name"));
//入力
name.sendKeys("hoge");
//再度クリック
btn.click();
//確認画面
var alert2 = driver.switchTo().alert();
alert2.getText().then(function(text){
//console.log(text);
expect(text).toBe("登録しますか？");
//OK
alert2.accept();
//cancel
//alert2.dismiss();
});
var alert3 = driver.switchTo().alert();
alert3.getText().then(function(text){
//console.log(text);
expect(text).toBe("登録しました。");
});
driver.quit().then(function(){
done();
});
});
});
テスト対象
いちおう。
js.php
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var name = $("#name").val();
if(name == ""){
alert("何か入れて下さい。");
return false;
}else{
if(confirm('登録しますか？')){
alert("登録しました。");
}else{
alert("処理はキャンセルされました。");
}
}
});
});
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="btn" value="send">
</body>
</html>