jscafe15 2013/10/6

e2e testing
(selenium + phantomjs)
ryuma tsukano
広義な意味のend to end testing
元はwebのリクエストからレスポンスまでの一連の
流れを一通り通して確認するテスト

● 以下、2通りある
a. 単体ページの確認(componentの結合に注目)
b. フローを確認する(ユー...
狭義な意味のend to end testing
system testフェーズで見る事が多いので、
(狭義の意味の)end to end testing ≒ system
test
に近い物と捉える人も多い。
この場合一連の流れをtestする...
end to end testingの自動化
大体、以下の組み合わせで実現
1. テストの実行環境
○ 本物のブラウザか偽物のブラウザ

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

3. Test Framewor...
実行環境
実行環境
● 本物のブラウザ
○ IEやFFやchrome等。

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

※実行環境自体は、他に、jsdom等browserを部分的にsimulationするtoolもある
が、あ...
phantomjs
webkitベースのheadless browser
※実際の画面には出てこないが、メモリ上で実際
のブラウザと同じような動きをしてくれる
jsで操作するが、中身はjsではない。
phantomjs
ソースはこんな感じ(Yahoo天気を表示)
var page = require('webpage').create(),
page.open('http://weather.yahoo.co.jp/weather/jp/1...
出来る事
● jsを使った操作/値の取得等。
○ ちょっとしたscrapingはこれだけでもいける。
○ jQuery埋め込みも頑張ればできる。

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

● ネットワーク監視
ブラウザ操作+Test Framework
ブラウザ自動操作
● よく聞くやつ
○ selenium2(web driver) + test FW
○ phantomjs系test runner(ex. casperjs)

● おまけ
○ cucumber:自然言語で記述
○ angu...
selenium2(web driver)
王道。複数projectの総称。
e2e系toolの殆どが内部でweb driver使ってる
● selenium IDE
○ Firefoxのplugin上でブラウザ操作を記録できるツール
(ブラウ...
ちなみに昔のseleniumと比べる
● 昔のselenium(1)
○ コア:javascript
○ 言語:selenese
○ project:
■ IDE
■ RC
■ +α…

=>jsで動いていたの
で、不安定だった。出来
ない事も...
selenium IDE
● selenium ide = firefox plugin
○ FF上でGUI操作でtest作れる。

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

● selenese独自scriptをhtml保存
○...
WebDriverソース
node版(npm install selenium-webdriver)
var webdriver = require('selenium-webdriver');
var driver = new webdriv...
どう作る?
作り方/使い方は人それぞれだが、一般的には
1.
2.
3.
4.
5.

アプリがある程度形になる
seleniumIDEで操作を記録しておく
convertしてwebdriverのソースにしておく
各ブラウザ毎実行できるように調...
selenium2の良い所
● seleniumIDEが簡単で生産性高い
○ e2e系は作るのが大変だが、seleniumはGUIで簡単に
作れるのが最大のメリット
○ smoke test/動作確認をIDEだけで実現しても良い

● 情報量が...
selenium2の悪い所
● まだ若干不安定
● 未だに出来ない事がある
○ file upload/download/popup/認証系に注意。
○ ブラウザ毎に出来るか否かも違うので要注意

● timeout問題で皆ハマる
○ wait...
phantomjs系のtest runner
phantomjsを使ったtest runner
● mocha,jasmine等test FWのpluginと一緒に
○ e2e用というより、UT系のjs実行環境をheadless化し
て、CI出...
casperjs
スクレーピングやテストするためのutility
※casperjs+phantomjsのみ。TestFW不要。
● 操作をステップ毎に整理
● form入力送信が可能
● clickやlink押下
● DOM操作
● logg...
ソース
ソースはこんな感じ
var links = [], keyword;
casper.test.begin('Google', {
setUp: function(test) { keyword = "jscafe";},
test: f...
良い所
● phantomjsベースなのでCIとの結合が簡単
○ xUnit reportもちゃんと出る

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

● 情報もそこそこ増えてる
悪い所
● 実際のbrowserに近いが完全に同じでない
● デバッグしにくい
○ 今どこの画面の何でひっかかっているか分かり辛い
○ verboseオプションやdump等取ろう。

● 少し特殊な事やろうとすると不安定になる
○ user-a...
おまけ:karma + angular
browserで簡単に確認できるtest runner。
本当は今日これMainでやりたかったんだけど
e2e:angularだけだった(scenario.js)
※UT系のtest runnerとしては...
おまけ:非開発者でも参加できるtool
cucumber:自然言語でブラウザ操作を記述。
結構、管理コストかかる。

agileXPの考え方に沿って、
客/Producerがtestを読み書きするなら効果的
=>それ以外で無理して使う必要は無い...
おまけ:最終兵器
他にも色んなtoolがある。中でも条件として
● windows環境がある
● 他の作業出来なくもいい
● assert無しで動作確認だけできれば良い
=>最終兵器:windowsのUWSC
でとりあえず逃げるという手もある
...
おしまい
Upcoming SlideShare
Loading in …5
×

end to end testing(jscafe15)

1,079 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,079
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

end to end testing(jscafe15)

  1. 1. jscafe15 2013/10/6 e2e testing (selenium + phantomjs) ryuma tsukano
  2. 2. 広義な意味のend to end testing 元はwebのリクエストからレスポンスまでの一連の 流れを一通り通して確認するテスト ● 以下、2通りある a. 単体ページの確認(componentの結合に注目) b. フローを確認する(ユースケースに注目)
  3. 3. 狭義な意味のend to end testing system testフェーズで見る事が多いので、 (狭義の意味の)end to end testing ≒ system test に近い物と捉える人も多い。 この場合一連の流れをtestする。 ● 先程の2通りのテストは a. 単体ページの確認 : 最近、この辺りのtestをmidway testとか言う人が出てきた(UT と e2eの間。) b. フローの確認 : このページで話してる狭義の意味での
  4. 4. end to end testingの自動化 大体、以下の組み合わせで実現 1. テストの実行環境 ○ 本物のブラウザか偽物のブラウザ 2. ブラウザ操作記述library ○ clickみたいな命令を書く 3. Test Framework ○ junit、rspec、jsなら、mochaやjasmine等 2と3はsetになる場合もある。
  5. 5. 実行環境
  6. 6. 実行環境 ● 本物のブラウザ ○ IEやFFやchrome等。 ● headlessブラウザ ○ phantomjs ○ 他にも色々 ※実行環境自体は、他に、jsdom等browserを部分的にsimulationするtoolもある が、あくまで部分的で仮の物なのでe2eで使うべきではないので省略。これらは、気 軽に使えるのでUT等では積極的に使うべき。)
  7. 7. phantomjs webkitベースのheadless browser ※実際の画面には出てこないが、メモリ上で実際 のブラウザと同じような動きをしてくれる jsで操作するが、中身はjsではない。
  8. 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. 9. 出来る事 ● jsを使った操作/値の取得等。 ○ ちょっとしたscrapingはこれだけでもいける。 ○ jQuery埋め込みも頑張ればできる。 ● screenshot ○ トラブル多い様なので注意。 ● ネットワーク監視
  10. 10. ブラウザ操作+Test Framework
  11. 11. ブラウザ自動操作 ● よく聞くやつ ○ selenium2(web driver) + test FW ○ phantomjs系test runner(ex. casperjs) ● おまけ ○ cucumber:自然言語で記述 ○ angular + Karma ○ UWSC
  12. 12. selenium2(web driver) 王道。複数projectの総称。 e2e系toolの殆どが内部でweb driver使ってる ● selenium IDE ○ Firefoxのplugin上でブラウザ操作を記録できるツール (ブラウザはFFのみ、操作も制約が多い) ○ web driverのソースに変換できる★ここがポイント ● selenium WebDriver ○ 各言語で各ブラウザ操作記述できる。 ○ xUnit等各言語のTestFWと組み合わせて使うのでDB 操作等何でも書ける。
  13. 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. 14. selenium IDE ● selenium ide = firefox plugin ○ FF上でGUI操作でtest作れる。 ● e2eテスト以外に ○ 自分の作業用等でも使える ● selenese独自scriptをhtml保存 ○ これをwebdriverにexport可能 ○ node版exportが現verに無い! ○ javaと似てる=>javaでexp&修正
  15. 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. 16. どう作る? 作り方/使い方は人それぞれだが、一般的には 1. 2. 3. 4. 5. アプリがある程度形になる seleniumIDEで操作を記録しておく convertしてwebdriverのソースにしておく 各ブラウザ毎実行できるように調整 実行
  17. 17. selenium2の良い所 ● seleniumIDEが簡単で生産性高い ○ e2e系は作るのが大変だが、seleniumはGUIで簡単に 作れるのが最大のメリット ○ smoke test/動作確認をIDEだけで実現しても良い ● 情報量がおそらく一番多い ○ が、旧selenium1と混同しないように注意。 ○ 基本、webdriverで検索すれば、大丈夫。なはず。 ● selenium(web driver)をwrapして、楽にしてくれ るlibraryがいっぱいある ○ それぞれの言語でググって ○ 但しそういうのはIDEと連携出来ない物が多い
  18. 18. selenium2の悪い所 ● まだ若干不安定 ● 未だに出来ない事がある ○ file upload/download/popup/認証系に注意。 ○ ブラウザ毎に出来るか否かも違うので要注意 ● timeout問題で皆ハマる ○ wait等決まった回避策でも回避できない事がある ● slow test問題 ○ 実行の気軽さはない ● CIとの結合が難しい?と言われる(が..) ○ 最近phantomjs製Driver出てきたので、今後使えそう ○ local(win/mac?)にjenkinsも多い=>どうにかなる? ● IDEからのconvertが完全でない。
  19. 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. 20. casperjs スクレーピングやテストするためのutility ※casperjs+phantomjsのみ。TestFW不要。 ● 操作をステップ毎に整理 ● form入力送信が可能 ● clickやlink押下 ● DOM操作 ● loggingイベント ● 機能テストとして結果をJunit形式XML出力
  21. 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. 22. 良い所 ● phantomjsベースなのでCIとの結合が簡単 ○ xUnit reportもちゃんと出る ● 早い ○ 気軽にテストできる。 ● 情報もそこそこ増えてる
  23. 23. 悪い所 ● 実際のbrowserに近いが完全に同じでない ● デバッグしにくい ○ 今どこの画面の何でひっかかっているか分かり辛い ○ verboseオプションやdump等取ろう。 ● 少し特殊な事やろうとすると不安定になる ○ user-agent変えたりとか
  24. 24. おまけ:karma + angular browserで簡単に確認できるtest runner。 本当は今日これMainでやりたかったんだけど e2e:angularだけだった(scenario.js) ※UT系のtest runnerとしてはangular以外も可能 single page appliで楽らしい。 今後の横展開に期待!
  25. 25. おまけ:非開発者でも参加できるtool cucumber:自然言語でブラウザ操作を記述。 結構、管理コストかかる。 agileXPの考え方に沿って、 客/Producerがtestを読み書きするなら効果的 =>それ以外で無理して使う必要は無いと思う ※@DHHも好きでないらしい
  26. 26. おまけ:最終兵器 他にも色んなtoolがある。中でも条件として ● windows環境がある ● 他の作業出来なくもいい ● assert無しで動作確認だけできれば良い =>最終兵器:windowsのUWSC でとりあえず逃げるという手もある UWSC = window操作を全自動化 ● seleniumで出来ない処理あった時に、 部分的にUWSC使うのも有り(実際やってた)
  27. 27. おしまい

×