Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

9,656 views

Published on

春のJavaScript祭2015in GMO YoursでSeleniumとJavaScriptの話をしました。
キャプチャを取ったり、自働入力をしたり、ちょっと便利に楽をするためのSelenium活用についてです

Published in: Engineering
  • Be the first to comment

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

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

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

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

  22. 22. 春のJavaScript祭2015 in GMO Yours Selenium Google Chrome Driverをインストール 公式サイト
 Selenium WebDeveloper×Node.js導入
  23. 23. SeleniumServerの起動 java -jar seleniumServer/selenium-server-standalone-2.45.0.jar - Dwebdriver.chrome.driver=chromedriver/chromedriver seleniumserverのある場所と、chromederiverのパスを設定
 ターミナルで実行します
  24. 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. 25. Nodeのテストを実行する node test1.js [Enter key] seleniumserverを先に起動しておいてください
  26. 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. 27. ブラウザサイズを変更して、キャプチャ 
 //ウィンドウサイズ変更
 driver.manage().window().setSize(640, 1500); //スクリーンショット
 driver.saveScreenshot( folder + i + '_max.png'); https://github.com/chihirokaasan/jsfes2015Selenium/ レスポンシブサイトとかに使える
  28. 28. 春のJavaScript祭2015 in GMO Yours 今から「学ぶならSeleniumWebDeveloper」 でもSeleniumIDEも未だ現役、使っている人も多い! SeleniumWebDeveloperとIDE どっちを使うべきか WebDriverによって動作も大きく異なる Selenium IDEから移行が難しい場合はケースバイケースで
 使い分けがベスト
  29. 29. “ありがとうございました”

×