SeleniumIDEとSelenium WebDeveloper × Node.js　Seleniumで業務効率化する15分

Transcript

• 1. Seleniumで仕事楽する15分 Selenium IDE と SeleniumWebDeveloper Node.js
• 2. Introduction 春のJavaScript祭2015 in GMO Yours フリーランスでWeb系エンジニア、ITかあさん 主にPHP、時々Node.jsですが、Node.jsは完全に趣味。 一応、JS祭の発起人。
• 3. Why Selenium?? 春のJavaScript祭2015 in GMO Yours なぜ今回Seleniumを選んだか プログラミングがしばらくご無沙汰で ネタ不足だから！ いえいえ Webデザイナーからエンジニアまで多くの人に 便利なSeleniumを使ってほしいから
• 4. Seleniumでできること What Selenium?
• 5. What Selenium 春のJavaScript祭2015 in GMO Yours いわゆるテストツール 動作内容を予め設定すると あとは自働でよきほどにしてくれる SeleniumにはSelenium IDEとSeleniumWebDeveloperがある キャプチャとったり自働入力したり、遷移をチェックテストの効率化 つまり よく分からんがよさそう！！
• 6. どちらを使うべきか Selenium RCと SeleniumWebDeveloperの違い
• 7. Selenium RC 春のJavaScript祭2015 in GMO Yours テストスクリプト PCでSelenium Serverを起動して、ブラウザで操作した内容をJavaScriptとして WEBページに設置する
 Selenium Server
• 8. Selenium IDE 春のJavaScript祭2015 in GMO Yours FireFoxのブラウザ操作を記憶 Selenium Coreが埋め込まれており Firefoxブラウザ上なら誰でも簡単に
 テストスクリプトが作れる Selenium Core 
 (JavaScript)
• 9. Selenium WebDriver 春のJavaScript祭2015 in GMO Yours ブラウザごとにDriverがある Driverごと固有の実装 ブラウザ固有のDriverに直接働きかけ、
 そのまま実装確認が可能に DriverDriver DriverDriver Driver 対応言語も PHP Java Ruby Node.js end more!
• 10. 未だ現役！昔からいるFirefoxのすごいプラグイン Selenium IDE
• 11. Selenium IDE 春のJavaScript祭2015 in GMO Yours FireFoxのブラウザ操作を記憶 ブラウザにJavaScriptを埋め込むという ブラウザのセキュリティで制限も
 多いが Selenium Core 
 (JavaScript) アドオン追加の手軽さから未だ人気
• 12. Selenium IDE FirefoxブラウザからSeleniumのダウンロードページからアドオン追加
• 13. Selenium IDE Selenium IDEを起動したら 赤い「録画」ボタンを押すだけ 終了時はもう一度「録画」ボタン テスト内容を保存と、
 テストの読み込みが可能
• 14. Selenium IDE Seleniumテストファイルは
 HTMLベースなので、誰でも
 ある程度簡単に変更ができる
• 15. Selenium IDEテストファイルを理解する openとclick open 遷移先のURL click (selector)を
 クリックしたら遷移 (selector)はCSSと一緒
• 16. Selenium IDEテストファイルを理解する setSpeedと変数のセット setSpeed テストの速度 store 変数のセット <!̶代入̶>
 <td>store</td><td>代入したい内容</td><td>変数名</td> <!̶変数の出力̶>
 <td>echo</td><td>javascript{ storedVars[ num ]; }</td><td></td>
• 17. Selenium IDEで画面キャプチャを保存 <!̶キャプチャ保存̶>
 <td>captureEntirePageScreenshot</td><td>保存先</td><td>オプション</td> <!̶数字を０埋めパディングして１加算、変数に保存̶>
 <td>store</td><td>javascript{ parseInt(storedVars['num']) + 1; }</td><td>num</td> <!̶デバッグとして変数を出力̶>
 <td>echo</td><td>javascript{ parseInt(storedVars['num']); }</td><td></td> https://github.com/chihirokaasan/jsfes2015Selenium/kaasan2.html 保存先は、相対パスよりも絶対パス 01.png 02.png …10.png という連番での０埋めしたファイル名にしたい
• 18. ブラウザ制御をより細かくできるよ！ Selenium WebDeveloperをNode.jsで動作させる
• 19. Selenium WebDeveloper×Node.js導入 春のJavaScript祭2015 in GMO Yours 自分の環境に合わせたNode.jsをダウンロードしてインストール
 公式サイト

• 20. Selenium WebDeveloper×Node.js導入 春のJavaScript祭2015 in GMO Yours Seleniumサーバーを Seleniumの公式からダウンロード 公式サイト

• 21. Selenium WebDeveloper×Node.js導入 春のJavaScript祭2015 in GMO Yours 自分の環境に合わせたNode.jsをダウンロードしてインストール
 公式サイト

• 22. 春のJavaScript祭2015 in GMO Yours Selenium Google Chrome Driverをインストール 公式サイト
 Selenium WebDeveloper×Node.js導入
• 23. SeleniumServerの起動 java -jar seleniumServer/selenium-server-standalone-2.45.0.jar - Dwebdriver.chrome.driver=chromedriver/chromedriver seleniumserverのある場所と、chromederiverのパスを設定
 ターミナルで実行します
• 24. Node.jsでテストケースを書く var webdriver = require('selenium-webdriver'); var driver = new webdriver.Builder(). usingServer('http://localhost:4444/wd/hub'). withCapabilities(webdriver.Capabilities.chrome()). build(); ! driver.get('https://peraichi.com/landing_pages/view/jsfes2015vol1'); driver.quit(); driver.get(‘URLにジャンプ’) driver.quit() 終了 https://github.com/chihirokaasan/jsfes2015Selenium/
• 25. Nodeのテストを実行する node test1.js [Enter key] seleniumserverを先に起動しておいてください
• 26. フォームの自動入力 
 //フォームに値を入力してsubmitボタンを押す
 driver.get("http://www.kaasan.info/sample/2012/10/simple_form/mail.php"). then(function(submit) { sleep(1000); return driver.findElement(webdriver.By.name( name )).sendKeys('ITかあさん'); //name=nameのフォームにvalueを代入 }). then(function() { sleep(1000); return driver.findElement(webdriver.By.name( submit )).click(); //name=submitをクリックする }); //指定時間実行を待つ
 function sleep(milliSeconds) { var startTime = new Date().getTime(); while (new Date().getTime() < startTime + milliSeconds); } https://github.com/chihirokaasan/jsfes2015Selenium/
• 27. ブラウザサイズを変更して、キャプチャ 
 //ウィンドウサイズ変更
 driver.manage().window().setSize(640, 1500); //スクリーンショット
 driver.saveScreenshot( folder + i + '_max.png'); https://github.com/chihirokaasan/jsfes2015Selenium/ レスポンシブサイトとかに使える
• 28. 春のJavaScript祭2015 in GMO Yours 今から「学ぶならSeleniumWebDeveloper」 でもSeleniumIDEも未だ現役、使っている人も多い！ SeleniumWebDeveloperとIDE どっちを使うべきか WebDriverによって動作も大きく異なる Selenium IDEから移行が難しい場合はケースバイケースで
 使い分けがベスト
• 29. “ありがとうございました”