Your SlideShare is downloading. ×
SeleniumIDEとSelenium WebDeveloper × Node.js Seleniumで業務効率化する15分
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

353
views

Published on

春のJavaScript祭2015in GMO YoursでSeleniumとJavaScriptの話をしました。 …

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

Published in: Engineering

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
353
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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> <!̶数字を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. ブラウザ制御をより細かくできるよ! 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. “ありがとうございました”

×