end to end testing(jscafe15)
?
0 likes?1,543 views
jscafe15(2013/10/6)で話したe2e testing(end to end testing)の話です。
![ソース
ソースはこんな感じ
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;
}); }; });](https://image.slidesharecdn.com/e2e-140113051422-phpapp02/85/end-to-end-testing-jscafe15-21-320.jpg)
end to end testing(jscafe15)
- 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 ○ トラブル多い様なので注意。 ● ネットワーク監視
- 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);
- 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で楽らしい。 今後の横展開に期待！
- 26. おまけ：最終兵器 他にも色んなtoolがある。中でも条件として ● windows環境がある ● 他の作業出来なくもいい ● assert無しで動作確認だけできれば良い =>最終兵器：windowsのUWSC でとりあえず逃げるという手もある UWSC = window操作を全自動化 ● seleniumで出来ない処理あった時に、 部分的にUWSC使うのも有り(実際やってた)
- 27. おしまい