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

1. Seleniumで仕事楽する15分
Selenium IDE と SeleniumWebDriver 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とSeleniumWebDriverがある
キャプチャとったり自働入力したり、遷移をチェックテストの効率化
つまり
よく分からんがよさそう！！

6. どちらを使うべきか
Selenium RCと SeleniumWebDriverの違い

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. “ありがとうございました”