Embed Size (px)
Citation preview
Seleniumで仕事楽する15分
Selenium IDE と SeleniumWebDriver×Node.js
Introduction
春のJavaScript祭2015 in GMO Yours
フリーランスでWeb系エンジニア、ITかあさん
主にPHP、時々Node.jsですが、Node.jsは完全に趣味。
一応、JS祭の発起人。
Why Selenium??
春のJavaScript祭2015 in GMO Yours
なぜ今回Seleniumを選んだか
プログラミングがしばらくご無沙汰で
ネタ不足だから！
いえいえ
Webデザイナーからエンジニアまで多くの人に
便利なSeleniumを使ってほしいから
Seleniumでできること
What Selenium?
What Selenium
春のJavaScript祭2015 in GMO Yours
いわゆるテストツール
動作内容を予め設定すると あとは自働でよきほどにしてくれる
SeleniumにはSelenium IDEとSeleniumWebDriverがある
キャプチャとったり自働入力したり、遷移をチェックテストの効率化
つまり
よく分からんがよさそう！！
どちらを使うべきか
Selenium RCと 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!
未だ現役！昔からいるFirefoxのすごいプラグイン
Selenium IDE
Selenium IDE
春のJavaScript祭2015 in GMO Yours
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導入
春の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/
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.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から移行が難しい場合はケースバイケースで
使い分けがベスト
“ありがとうございました”
