jscafe15(2013/10/6)で話したe2e testing(end to end testing)の話です。

1. jscafe15 2013/10/6
e2e testing
(selenium + phantomjs)
ryuma tsukano

2. 広義な意味のend to end testing
元はwebのリクエストからレスポンスまでの一連の
流れを一通り通して確認するテスト
● 以下、2通りある
a. 単体ページの確認(componentの結合に注目)
b. フローを確認する(ユースケースに注目)

3. 狭義な意味のend to end testing
system testフェーズで見る事が多いので、
(狭義の意味の)end to end testing ≒ system
test
に近い物と捉える人も多い。
この場合一連の流れをtestする。
● 先程の２通りのテストは
a. 単体ページの確認 : 最近、この辺りのtestをmidway
testとか言う人が出てきた(UT と e2eの間。)
b. フローの確認 : このページで話してる狭義の意味での

4. end to end testingの自動化
大体、以下の組み合わせで実現
1. テストの実行環境
○ 本物のブラウザか偽物のブラウザ
2. ブラウザ操作記述library
○ clickみたいな命令を書く
3. Test Framework
○ junit、rspec、jsなら、mochaやjasmine等
2と3はsetになる場合もある。

5. 実行環境

6. 実行環境
● 本物のブラウザ
○ IEやFFやchrome等。
● headlessブラウザ
○ phantomjs
○ 他にも色々
※実行環境自体は、他に、jsdom等browserを部分的にsimulationするtoolもある
が、あくまで部分的で仮の物なのでe2eで使うべきではないので省略。これらは、気
軽に使えるのでUT等では積極的に使うべき。)

7. phantomjs
webkitベースのheadless browser
※実際の画面には出てこないが、メモリ上で実際
のブラウザと同じような動きをしてくれる
jsで操作するが、中身はjsではない。

8. phantomjs
ソースはこんな感じ(Yahoo天気を表示)
var page = require('webpage').create(),
page.open('http://weather.yahoo.co.jp/weather/jp/13/4410.html', function(status){
var title = page.evaluate(function() { // evaluate＝この環境でjs評価
return document.title;
});
console.log('Title is ' + title);
phantom.exit();
});

9. 出来る事
● jsを使った操作/値の取得等。
○ ちょっとしたscrapingはこれだけでもいける。
○ jQuery埋め込みも頑張ればできる。
● screenshot
○ トラブル多い様なので注意。
● ネットワーク監視

10. ブラウザ操作＋Test Framework

11. ブラウザ自動操作
● よく聞くやつ
○ selenium2(web driver) + test FW
○ phantomjs系test runner(ex. casperjs)
● おまけ
○ cucumber：自然言語で記述
○ angular + Karma
○ UWSC

12. selenium2(web driver)
王道。複数projectの総称。
e2e系toolの殆どが内部でweb driver使ってる
● selenium IDE
○ Firefoxのplugin上でブラウザ操作を記録できるツール
(ブラウザはFFのみ、操作も制約が多い)
○ web driverのソースに変換できる★ここがポイント
● selenium WebDriver
○ 各言語で各ブラウザ操作記述できる。
○ xUnit等各言語のTestFWと組み合わせて使うのでDB
操作等何でも書ける。

13. ちなみに昔のseleniumと比べる
● 昔のselenium(1)
○ コア：javascript
○ 言語：selenese
○ project：
■ IDE
■ RC
■ +α…
=>jsで動いていたの
で、不安定だった。出来
ない事も多かった。
● 今のselenium(2)
○ コア：browser毎に違う
が基本的にnativeアク
セス
○ 言語：web driverの
API + selenese(IDE)
○ project :
■ IDE
■ WebDriver(旧RC)
=>nativeアクセスで安
定化(完全ではない)

14. selenium IDE
● selenium ide = firefox plugin
○ FF上でGUI操作でtest作れる。
● e2eテスト以外に
○ 自分の作業用等でも使える
● selenese独自scriptをhtml保存
○ これをwebdriverにexport可能
○ node版exportが現verに無い！
○ javaと似てる=>javaでexp&修正

15. WebDriverソース
node版(npm install selenium-webdriver)
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().
withCapabilities(webdriver.Capabilities.chrome()).build();
driver.get('http://www.google.com');
driver.findElement(webdriver.By.name('q')).sendKeys('jscafe');
driver.findElement(webdriver.By.name('btnG')).click();
driver.wait(function() {
return driver.getTitle().then(function(title) {
return title === 'webdriver - Google 検索';
});
}, 1000);

16. どう作る？
作り方/使い方は人それぞれだが、一般的には
1.
2.
3.
4.
5.
アプリがある程度形になる
seleniumIDEで操作を記録しておく
convertしてwebdriverのソースにしておく
各ブラウザ毎実行できるように調整
実行

17. selenium2の良い所
● seleniumIDEが簡単で生産性高い
○ e2e系は作るのが大変だが、seleniumはGUIで簡単に
作れるのが最大のメリット
○ smoke test/動作確認をIDEだけで実現しても良い
● 情報量がおそらく一番多い
○ が、旧selenium1と混同しないように注意。
○ 基本、webdriverで検索すれば、大丈夫。なはず。
● selenium(web driver)をwrapして、楽にしてくれ
るlibraryがいっぱいある
○ それぞれの言語でググって
○ 但しそういうのはIDEと連携出来ない物が多い

18. selenium2の悪い所
● まだ若干不安定
● 未だに出来ない事がある
○ file upload/download/popup/認証系に注意。
○ ブラウザ毎に出来るか否かも違うので要注意
● timeout問題で皆ハマる
○ wait等決まった回避策でも回避できない事がある
● slow test問題
○ 実行の気軽さはない
● CIとの結合が難しい?と言われる(が..)
○ 最近phantomjs製Driver出てきたので、今後使えそう
○ local(win/mac?)にjenkinsも多い=>どうにかなる?
● IDEからのconvertが完全でない。

19. phantomjs系のtest runner
phantomjsを使ったtest runner
● mocha,jasmine等test FWのpluginと一緒に
○ e2e用というより、UT系のjs実行環境をheadless化し
て、CI出来るようにするための物が多い。
○ capybaraのpoltergeist(ruby)等e2e向けも有る
● web driver上で使う
○ 非公式GhostDriverと公式phantomjsdriverがある。ま
だ情報少ない。
● 独自のtest runner
○ casperjsとか

20. casperjs
スクレーピングやテストするためのutility
※casperjs+phantomjsのみ。TestFW不要。
● 操作をステップ毎に整理
● form入力送信が可能
● clickやlink押下
● DOM操作
● loggingイベント
● 機能テストとして結果をJunit形式XML出力

21. ソース
ソースはこんな感じ
var links = [], keyword;
casper.test.begin('Google', {
setUp: function(test) { keyword = "jscafe";},
test: function(test) {
casper.start('http://google.co.jp/', function(){
this.fill('form[action="/search"]', {q: keyword}, true); });
casper.then(function(){ // このthenをいっぱいつけてclick等アクション書く
links = this.evaluate(_getLinks); });
casper.run(function(){
this.echo('-' + links.join('n')).exit(); });
function _getLinks(){ // 検索結果の一覧からリンク取得。
var links = document.querySelectorAll('h3.r a');
return Array.prototype.map.call(links, function(e){
returne.innerHTML;
}); }; });

22. 良い所
● phantomjsベースなのでCIとの結合が簡単
○ xUnit reportもちゃんと出る
● 早い
○ 気軽にテストできる。
● 情報もそこそこ増えてる

23. 悪い所
● 実際のbrowserに近いが完全に同じでない
● デバッグしにくい
○ 今どこの画面の何でひっかかっているか分かり辛い
○ verboseオプションやdump等取ろう。
● 少し特殊な事やろうとすると不安定になる
○ user-agent変えたりとか

24. おまけ：karma + angular
browserで簡単に確認できるtest runner。
本当は今日これMainでやりたかったんだけど
e2e：angularだけだった(scenario.js)
※UT系のtest runnerとしてはangular以外も可能
single page appliで楽らしい。
今後の横展開に期待！

25. おまけ：非開発者でも参加できるtool
cucumber：自然言語でブラウザ操作を記述。
結構、管理コストかかる。
agileXPの考え方に沿って、
客/Producerがtestを読み書きするなら効果的
=>それ以外で無理して使う必要は無いと思う
※@DHHも好きでないらしい

26. おまけ：最終兵器
他にも色んなtoolがある。中でも条件として
● windows環境がある
● 他の作業出来なくもいい
● assert無しで動作確認だけできれば良い
=>最終兵器：windowsのUWSC
でとりあえず逃げるという手もある
UWSC = window操作を全自動化
● seleniumで出来ない処理あった時に、
部分的にUWSC使うのも有り(実際やってた)

27. おしまい