Introduction
春のJavaScript祭2015 in GMO Yours
フリーランスでWeb系エンジニア、ITかあさん
主にPHP、時々Node.jsですが、Node.jsは完全に趣味。
一応、JS祭の発起人。
Why Selenium??
春のJavaScript祭2015 in GMO Yours
なぜ今回Seleniumを選んだか
プログラミングがしばらくご無沙汰で
ネタ不足だから!
いえいえ
Webデザイナーからエンジニアまで多くの人に
便利なSeleniumを使ってほしいから
What Selenium
春のJavaScript祭2015 in GMO Yours
いわゆるテストツール
動作内容を予め設定すると あとは自働でよきほどにしてくれる
SeleniumにはSelenium IDEとSeleniumWebDriverがある
キャプチャとったり自働入力したり、遷移をチェックテストの効率化
つまり
よく分からんがよさそう!!
Selenium RC
春のJavaScript祭2015 in GMO Yours
テストスクリプト
PCでSelenium Serverを起動して、ブラウザで操作した内容をJavaScriptとしてWEBページに設置する
Selenium Server
Selenium IDE
春のJavaScript祭2015 in GMO Yours
FireFoxのブラウザ操作を記憶
Selenium Coreが埋め込まれており
Firefoxブラウザ上なら誰でも簡単にテストスクリプトが作れる
Selenium Core (JavaScript)
Selenium WebDriver
春のJavaScript祭2015 in GMO Yours
ブラウザごとにDriverがある
Driverごと固有の実装
ブラウザ固有のDriverに直接働きかけ、 そのまま実装確認が可能に
DriverDriver
DriverDriver
Driver
対応言語も PHP Java Ruby Node.js end more!
Selenium IDE
春のJavaScript祭2015 in GMO Yours
FireFoxのブラウザ操作を記憶
ブラウザにJavaScriptを埋め込むというブラウザのセキュリティで制限も多いが
Selenium Core (JavaScript)
アドオン追加の手軽さから未だ人気
Selenium IDE
FirefoxブラウザからSeleniumのダウンロードページからアドオン追加
Selenium IDEテストファイルを理解する
setSpeedと変数のセット
setSpeed テストの速度store 変数のセット
<!̶代入̶>
<td>store</td><td>代入したい内容</td><td>変数名</td>
<!̶変数の出力̶>
<td>echo</td><td>javascript{ storedVars[‘num’]; }</td><td></td>
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埋めしたファイル名にしたい
Selenium WebDeveloper×Node.js導入
春のJavaScript祭2015 in GMO Yours
自分の環境に合わせたNode.jsをダウンロードしてインストール
公式サイト
Selenium WebDeveloper×Node.js導入
春のJavaScript祭2015 in GMO Yours
Seleniumサーバーを Seleniumの公式からダウンロード
公式サイト
Selenium WebDeveloper×Node.js導入
春のJavaScript祭2015 in GMO Yours
自分の環境に合わせたNode.jsをダウンロードしてインストール
公式サイト
春のJavaScript祭2015 in GMO Yours
Selenium Google Chrome Driverをインストール
公式サイト
Selenium WebDeveloper×Node.js導入
SeleniumServerの起動
java -jar seleniumServer/selenium-server-standalone-2.45.0.jar -
Dwebdriver.chrome.driver=chromedriver/chromedriver
seleniumserverのある場所と、chromederiverのパスを設定ターミナルで実行します
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/
フォームの自動入力
//フォームに値を入力して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/
ブラウザサイズを変更して、キャプチャ
//ウィンドウサイズ変更
driver.manage().window().setSize(640, 1500);
//スクリーンショット
driver.saveScreenshot( folder + i + '_max.png');
https://github.com/chihirokaasan/jsfes2015Selenium/
レスポンシブサイトとかに使える
春のJavaScript祭2015 in GMO Yours
今から「学ぶならSeleniumWebDeveloper」
でもSeleniumIDEも未だ現役、使っている人も多い!
SeleniumWebDeveloperとIDE どっちを使うべきか
WebDriverによって動作も大きく異なる
Selenium IDEから移行が難しい場合はケースバイケースで
使い分けがベスト