e2e testing(selenium + phantomjs)

ryuma tsukano

jscafe15 2013/10/6

広義な意味のend to end testing

元はwebのリクエストからレスポンスまでの一連の流れを一通り通して確認するテスト

● 以下、2通りあるa. 単体ページの確認(componentの結合に注目)b. フローを確認する(ユースケースに注目)

狭義な意味のend to end testing

system testフェーズで見る事が多いので、

(狭義の意味の)end to end testing ≒ system testに近い物と捉える人も多い。

この場合一連の流れをtestする。

● 先程の２通りのテストはa. 単体ページの確認 : 最近、この辺りのtestをmidway

testとか言う人が出てきた(UT と e2eの間。)b. フローの確認 : このページで話してる狭義の意味での

end to end test ★今日の話はこちら

end to end testingの自動化

大体、以下の組み合わせで実現

1. テストの実行環境○ 本物のブラウザか偽物のブラウザ

2. ブラウザ操作記述library○ clickみたいな命令を書く

3. Test Framework○ junit、rspec、jsなら、mochaやjasmine等

2と3はsetになる場合もある。

実行環境

実行環境

● 本物のブラウザ○ IEやFFやchrome等。

● headlessブラウザ○ phantomjs○ 他にも色々

※実行環境自体は、他に、jsdom等browserを部分的にsimulationするtoolもある

が、あくまで部分的で仮の物なのでe2eで使うべきではないので省略。これらは、気軽に使えるのでUT等では積極的に使うべき。)

phantomjs

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

jsで操作するが、中身はjsではない。

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();});

出来る事

● jsを使った操作/値の取得等。○ ちょっとしたscrapingはこれだけでもいける。○ jQuery埋め込みも頑張ればできる。

● screenshot○ トラブル多い様なので注意。

● ネットワーク監視

ブラウザ操作＋Test Framework

ブラウザ自動操作

● よく聞くやつ○ selenium2(web driver) + test FW○ phantomjs系test runner(ex. casperjs)

● おまけ○ cucumber：自然言語で記述○ angular + Karma○ UWSC

selenium2(web driver)

王道。複数projectの総称。

e2e系toolの殆どが内部でweb driver使ってる

● selenium IDE○ Firefoxのplugin上でブラウザ操作を記録できるツール

(ブラウザはFFのみ、操作も制約が多い)○ web driverのソースに変換できる★ここがポイント

● selenium WebDriver○ 各言語で各ブラウザ操作記述できる。

○ xUnit等各言語のTestFWと組み合わせて使うのでDB操作等何でも書ける。

ちなみに昔のseleniumと比べる

● 昔のselenium(1)○ コア：javascript○ 言語：selenese○ project：

■ IDE■ RC■ + α …

=>jsで動いていたので、不安定だった。出来ない事も多かった。

● 今のselenium(2)○ コア：browser毎に違う

が基本的にnativeアク

セス

○ 言語：web driverのAPI + selenese(IDE)

○ project : ■ IDE■ WebDriver(旧RC)

=>nativeアクセスで安定化(完全ではない)

selenium IDE

● selenium ide = firefox plugin○ FF上でGUI操作でtest作れる。

● e2eテスト以外に○ 自分の作業用等でも使える

● selenese独自scriptをhtml保存○ これをwebdriverにexport可能○ node版exportが現verに無い！○ javaと似てる=>javaでexp&修正

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);

どう作る？

作り方/使い方は人それぞれだが、一般的には

1. アプリがある程度形になる2. seleniumIDEで操作を記録しておく3. convertしてwebdriverのソースにしておく4. 各ブラウザ毎実行できるように調整5. 実行

selenium2の良い所

● seleniumIDEが簡単で生産性高い○ e2e系は作るのが大変だが、seleniumはGUIで簡単に

作れるのが最大のメリット○ smoke test/動作確認をIDEだけで実現しても良い

● 情報量がおそらく一番多い○ が、旧selenium1と混同しないように注意。○ 基本、webdriverで検索すれば、大丈夫。なはず。

● selenium(web driver)をwrapして、楽にしてくれるlibraryがいっぱいある○ それぞれの言語でググって○ 但しそういうのはIDEと連携出来ない物が多い

selenium2の悪い所

● まだ若干不安定● 未だに出来ない事がある

○ file upload/download/popup/認証系に注意。○ ブラウザ毎に出来るか否かも違うので要注意

● timeout問題で皆ハマる○ wait等決まった回避策でも回避できない事がある

● slow test問題○ 実行の気軽さはない

● CIとの結合が難しい?と言われる(が..)○ 最近phantomjs製Driver出てきたので、今後使えそう○ local(win/mac?)にjenkinsも多い=>どうにかなる?

● IDEからのconvertが完全でない。

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とか

casperjs

スクレーピングやテストするためのutility※casperjs+phantomjsのみ。TestFW不要。

● 操作をステップ毎に整理● form入力送信が可能● clickやlink押下● DOM操作● loggingイベント● 機能テストとして結果をJunit形式XML出力

ソース

ソースはこんな感じ

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; }); }; });

良い所

● phantomjsベースなのでCIとの結合が簡単○ xUnit reportもちゃんと出る

● 早い○ 気軽にテストできる。

● 情報もそこそこ増えてる

悪い所

● 実際のbrowserに近いが完全に同じでない● デバッグしにくい

○ 今どこの画面の何でひっかかっているか分かり辛い○ verboseオプションやdump等取ろう。

● 少し特殊な事やろうとすると不安定になる○ user-agent変えたりとか

おまけ：karma + angular

browserで簡単に確認できるtest runner。本当は今日これMainでやりたかったんだけど

e2e：angularだけだった(scenario.js)

※UT系のtest runnerとしてはangular以外も可能

single page appliで楽らしい。

今後の横展開に期待！

おまけ：非開発者でも参加できるtool

cucumber：自然言語でブラウザ操作を記述。

結構、管理コストかかる。

agileXPの考え方に沿って、

客/Producerがtestを読み書きするなら効果的

=>それ以外で無理して使う必要は無いと思う※@DHHも好きでないらしい

おまけ：最終兵器

他にも色んなtoolがある。中でも条件として

● windows環境がある● 他の作業出来なくもいい● assert無しで動作確認だけできれば良い

=>最終兵器：windowsのUWSCでとりあえず逃げるという手もある

UWSC = window操作を全自動化

● seleniumで出来ない処理あった時に、

部分的にUWSC使うのも有り(実際やってた)

おしまい