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

Seleniumで仕事楽する15分
Selenium IDE と SeleniumWebDriver Node.js

Introduction
春のJavaScript祭2015 in GMO Yours
フリーランスでWeb系エンジニア、ITかあさん
主にPHP、時々Node.jsですが、Node.jsは完全に趣味。
一応、JS祭の発起人。

Why Selenium??
なぜ今回Seleniumを選んだか
プログラミングがしばらくご無沙汰で
ネタ不足だから！
いえいえ
Webデザイナーからエンジニアまで多くの人に
便利なSeleniumを使ってほしいから

Seleniumでできること
What Selenium?

What Selenium
いわゆるテストツール
動作内容を予め設定するとあとは自働でよきほどにしてくれる
SeleniumにはSelenium IDEとSeleniumWebDriverがある
キャプチャとったり自働入力したり、遷移をチェックテストの効率化
つまり
よく分からんがよさそう！！

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

Selenium RC
テストスクリプト
PCでSelenium Serverを起動して、ブラウザで操作した内容をJavaScriptとして
WEBページに設置する 
Selenium Server

Selenium IDE
FireFoxのブラウザ操作を記憶
Selenium Coreが埋め込まれており
Firefoxブラウザ上なら誰でも簡単に 
テストスクリプトが作れる
Selenium Core  
(JavaScript)

Selenium WebDriver
ブラウザごとにDriverがある
Driverごと固有の実装
ブラウザ固有のDriverに直接働きかけ、 
そのまま実装確認が可能に
DriverDriver
DriverDriver
Driver
対応言語も PHP Java Ruby Node.js end more!

未だ現役！昔からいるFirefoxのすごいプラグイン
Selenium IDE

Selenium IDE
FireFoxのブラウザ操作を記憶
ブラウザにJavaScriptを埋め込むという
ブラウザのセキュリティで制限も 
多いが
Selenium Core  
(JavaScript)
アドオン追加の手軽さから未だ人気

Selenium IDE
FirefoxブラウザからSeleniumのダウンロードページからアドオン追加

Selenium IDE
Selenium IDEを起動したら
赤い「録画」ボタンを押すだけ
終了時はもう一度「録画」ボタン
テスト内容を保存と、 
テストの読み込みが可能

Selenium IDE
Seleniumテストファイルは 
HTMLベースなので、誰でも 
ある程度簡単に変更ができる

Selenium IDEテストファイルを理解する
openとclick
open 遷移先のURL
click (selector)を 
クリックしたら遷移
(selector)はCSSと一緒

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>
<!̶数字を０埋めパディングして１加算、変数に保存̶> 
<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 という連番での０埋めしたファイル名にしたい

ブラウザ制御をより細かくできるよ！
Selenium WebDeveloperをNode.jsで動作させる

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

Seleniumサーバーを Seleniumの公式からダウンロード
公式サイト

Selenium Google Chrome Driverをインストール
公式サイト 

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/

Nodeのテストを実行する
node test1.js [Enter key]
seleniumserverを先に起動しておいてください

フォームの自動入力
 
//フォームに値を入力してsubmitボタンを押す 
driver.get("http://www.kaasan.info/sample/2012/10/simple_form/mail.php").
then(function(submit) {
sleep(1000);
return driver.ﬁndElement(webdriver.By.name( name )).sendKeys('ITかあさん'); //name=nameのフォームにvalueを代入
}).
then(function() {
sleep(1000);
return driver.ﬁndElement(webdriver.By.name( submit )).click(); //name=submitをクリックする
});
//指定時間実行を待つ 
function sleep(milliSeconds)
{
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + milliSeconds);
}

ブラウザサイズを変更して、キャプチャ
 
//ウィンドウサイズ変更 
driver.manage().window().setSize(640, 1500);
//スクリーンショット 
driver.saveScreenshot( folder + i + '_max.png');
レスポンシブサイトとかに使える

今から「学ぶならSeleniumWebDeveloper」
でもSeleniumIDEも未だ現役、使っている人も多い！
SeleniumWebDeveloperとIDE どっちを使うべきか
WebDriverによって動作も大きく異なる
Selenium IDEから移行が難しい場合はケースバイケースで 
使い分けがベスト

“ありがとうございました”

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

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to SeleniumIDEとSelenium WebDriver × Node.js　Seleniumで業務効率化する15分 (20)

More from 松田千尋 (6)