Downloaded 22 times
Uploaded byKohki Nakashima
JavaScriptでWebDriverのテストコードを書きましょ
ねこび〜ん by カネウチカズコ: http://ja.netbeans.org/nekobean drawn by Cacoo: http://cacoo.com/
JavaScriptでWebDriverのテストコードを書きましょ
- 1. JAVASCRIPT ♥ WEBDRIVER @kuronekomichael 福岡Haxe勉強会 feat. HTML5+α @福岡 - 第0x00回
- 2.
- 3. Web Driverとは Googleが開発したWebアプリテストツール。 2011年にSeleniumと統合された。 Selenium2 ===WebDriver RESTfulなHTTPプロトコル「Json Wire Protocol」で ブラウザの遠隔操作を実現 今日はRemote Web Driverの話だけやります JsonWireProtocol: https://code.google.com/p/selenium/wiki/JsonWireProtocol
- 4. WebアプリのUIテスト プラットフォーム毎/ブラウザ毎に、同じことを何度も何度も･･･ drawn by Cacoo:http://cacoo.com/
- 5. あ、IE9でも確認しておかないと… drawn by Cacoo:http://cacoo.com/
- 6. Androidが追加！2.xと4.xは別物なの?! drawn by Cacoo:http://cacoo.com/
- 7. GalaxyS4だけおかしい?AQUOS Phoneも? 何？部長がiOS7βにしただとおお？！？ drawn byCacoo: http://cacoo.com/
- 8.
- 9.
- 10. Web Driverの仕組み ・テストコードを元に操作を要求する「WebDriver クライアント」 ・HTTP経由で要求を受け取ってブラウザを操作する「WebDriverサーバ」 ブラウザを操作するための「ドライバ」(ブラウザ毎に用意されている) drawn by Cacoo: http://cacoo.com/ねこび∼ん by カネウチカズコ: http://ja.netbeans.org/nekobean
- 11. Web Driver Server 自前でWebDriver Serverを準備したくないなら、Sause Labを使う手もあります https://saucelabs.com/php/se2/2 drawn by Cacoo: http://cacoo.com/ねこび∼ん by カネウチカズコ: http://ja.netbeans.org/nekobean
- 12. Web Driver Client JsonWire Protocolに従ったhttpリクエスト/レスポンスが 処理できれば、実装言語は何でもいい すでに言語毎に様々な実装有り(サードパーティ含む) ねこび∼ん by カネウチカズコ: http://ja.netbeans.org/nekobean
- 13.
- 14. wdでの実装例 var wd =require('wd'), assert = require('assert'), browser = wd.remote({hostname: '10.0.2.19', port: 8080}); browser.init({browserName:'android'}, function(err, sessionId) { // ページを開く browser.get("http://demo.basercms.net/", function(err) { // 要素を取得 browser.elementByCssSelector('#global_menu .menu04 a', function(err, el) { // 要素の文字列をチェック el.text(function(err, text) { assert.equal(text, '新着情報'); // 終了 browser.quit(); }); }); }); }); wdはサンプルも豊富なので参考に。Json Wire ProtocolとAPIの対比表は、読み方に慣れが必要かも…。 wd document: https://github.com/admc/wd
- 15.
- 16.
- 17.
- 18.
- 19. 1)事前にセッション情報を入れる // 古いセッション情報を削除 browser.deleteAllCookies(function(err) { //セッション情報を設定 browser.setCookie({name:'uuid', value:'...'}, function(err) { // 続きの処理 }); }); ※いったん全てのCookieを削除しているのは、Android DriverでBrowserのCookieを引き継いでしまうのを防ぐため
- 20.
- 21. 1)事前にセッション情報を入れる×3 // 古いセッション情報を削除 browser.deleteAllCookies(function(err) { //セッション情報を設定 browser.setCookie({name:'uuid', value:'...'}, function(err) { browser.setCookie({name:'cookie-P', value:'...'}, function(err) { browser.setCookie({name:'tutorial_flag', value:'true'}, function(err) { // 続きの処理 }); }); }); });
- 22.
- 23. 2) ページを開いてタイトルをテスト // ページを開く browser.get("http://ncat.me/",function(err) { assert.ifError(err); // タイトルが意図した文字列かテスト browser.title(function(err, title) { assert.ifError(err); assert.ok(~title.indexOf('ネガネガ ネガにゃんこ')); // 続きの処理 }); });
- 24. 3) 必須要素が存在するかテスト // 画面が表示されるまで待つ browser.waitForVisibleByCssSelector('#mypageBtnPortal',10 * 1000, function(err) { // 必須要素が存在するかテスト browser.elementByCssSelector('#mypageBtnPortal', function(err, element) { assert.ifError(err); // 続きの処理 }); });
- 25. 4) 要素をクリックして遷移をテスト // 特定の要素をクリック element.click(function(err){ assert.ifError(err); // 遷移先ページが表示されるまで待つ browser.waitForVisibleByCssSelector('#btnBack', 10 * 1000, function(err) { assert.ifError(err); // 続きの処理 }); });
- 26. 5) スクリーンショットを保存 // スクリーンショットを撮る browser.takeScreenshot(function(err,screenshot) { assert.ifError(err); fs.writeFile('screenshot.png', screenshot, 'base64', function(err) { assert.ifError(err); // もし続きがあればここに }); });
- 27. browser.init({browserName: 'android'}, function(err,sessionId) { assert.ifError(err); // ページを開く browser.get("http://ncat.me/dl/", function(err) { assert.ifError(err); // 古いセッション情報を削除 browser.deleteAllCookies(function(err) { assert.ifError(err); // セッション情報を設定 browser.setCookie({name:'uuid', value:'...'}, function(err) { assert.ifError(err); browser.setCookie({name:'cookie-P', value:'...'}, function(err) { assert.ifError(err); browser.setCookie({name:'tutorial_flag', value:'true'}, function(err) { assert.ifError(err); // Cookie付きで再びページを開く browser.get("http://ncat.me/", function(err) { assert.ifError(err); // タイトルが意図した文字列かテスト browser.title(function(err, title) { assert.ifError(err); assert.ok(~title.indexOf('ネガネガ ネガにゃんこ')); // 画面が表示されるまで待つ browser.waitForVisibleByCssSelector('#mypageBtnPortal', 10 * 1000, function(err) { // 必須要素が存在するかテスト browser.elementByCssSelector('#mypageBtnPortal', function(err, element) { assert.ifError(err); // 特定の要素をクリックして意図したページに遷移するかテスト element.click(function(err) { assert.ifError(err); browser.waitForVisibleByCssSelector('#btnBack', 10 * 1000, function(err) { assert.ifError(err); // スクリーンショットを撮る browser.takeScreenshot(function(err, screenshot) { assert.ifError(err); fs.writeFile('screenshot.png', screenshot, 'base64', function(err) { assert.ifError(err); browser.quit(); }); }); }); }); }); }); }); }); }); }); }); }); }); });
- 28. WELCOME TO CALLBACK HELL herecome a Callback Monster Copyright © 2013 Warner Bros. Pictures / Picture from http://www.zekefilm.org/2013/07/11/tag-team-review-pacific-rim/
- 29.
- 30. REDEMPTION FROM CALLBACK HELL 人類には yieldがある･･･! Copyright© 2013 Warner Bros. Pictures / Picture from http://www.prairiedogmag.com/review-pacific-rim-delivers-quality-entertainment-but-little-else/ We don't give up
- 31. REDEMPTION FROM CALLBACK HELL 人類には yieldがある･･･! Copyright© 2013 Warner Bros. Pictures / Picture from http://www.prairiedogmag.com/review-pacific-rim-delivers-quality-entertainment-but-little-else/
- 32. yield/generator 関数の実行を途中で中断して、 必要に応じて再開する機能 なんだ、夢でも見ているのか・・？ ECMA Script6で導入が決定している 1. 2006/10FireFox2で独自実装 (ECMA Script3拡張、JavaScipt1.7) 2. ECMAScript6(harmony)に導入決定 次世代JavaScriptに入ることが確定 3. 先行してV8に実装完了 4. Chrome Canary(Chrome開発版)には既に導入済み Node 0.12以降に導入済み ECMAScript 6draft: http://wiki.ecmascript.org/doku.php?id=harmony:generators
- 33. yieldの簡単な使用例 function* asyncCode() { console.log('初めの処理'); yield1; console.log('何か終わった後の処理'); return 2; } // generatorの生成(まだ関数は実行されない) var gen = asyncCode(); // １回めの実行 var ret = gen.next(); // コンソールには’初めの処理’が出力される // ret === {value:1, done:false} // ２回めの実行 ret = gen.next(); // コンソールには’何か終わった後の処理’が出力される // ret === {value:2, done:true}
- 34.
- 35. wd-syncを使った実装 sync(function() { browser.init({browserName: 'android'}); //Cookieを設定するためにいったんサイトを開く browser.get("http://ncat.me/dl/"); // セッション情報を再設定 browser.deleteAllCookies(); browser.setCookie({name:'uuid', value:'...'}); browser.setCookie({name:'cookie-P', value:'...'}); browser.setCookie({name:'tutorial_flag', value:'true'}); // Cookieを設定したので、改めて開く browser.get("http://ncat.me/"); // タイトルが意図した文字列かテスト var title = browser.title(); assert.ok(~title.indexOf('ネガネガ ネガにゃんこ')); // 画面が表示されるまで待つ browser.waitForVisibleByCssSelector('#mypageBtnPortal', 10 * 1000); // 必須要素が存在するかテスト var element = browser.elementByCssSelector('#mypageBtnPortal'); assert.ok(element); // 特定の要素をクリックして意図したページに遷移するかテスト element.click(); browser.waitForVisibleByCssSelector('#btnBack', 10 * 1000); // スクリーンショットを取得 var screenshot = browser.takeScreenshot(); assert.ok(screenshot); fs.writeFileSync('screenshot.png', screenshot, 'base64'); });
- 36. ending 意外とWeb Driverは簡単 うまく動作しない時は、http req/resの中身を見る JsonWire Protocolは理解しやすいので一読オススメ コールバック地獄から抜けだそう ブラウザのコードではまだ地獄が続くけど… テストコードはシンプルが第一 やっぱりUIのテストは難しい 完璧は求めずに、やれることからやろう(not TDD) スモークテストでいいじゃない
- 37.