７月１８日に行われたエスキュービズム・テクノロジー社内勉強会資料になります。

1. CasperJS
による機能テスト⾃動化
画像： http://docs.casperjs.org/en/latest/

2. もくじ
1. はじめに
2. 機能テストへの活⽤
3. 開発者の⽅へ
4. まとめ

3. 1.CasperJSとは
• CasperJS is an open source navigation scriptingnavigation scriptingnavigation scriptingnavigation scripting &&&&
testing utilitytesting utilitytesting utilitytesting utility written in Javascript for the PhantomJS
WebKit headless browser and SlimerJS (Gecko).
• PhantomJSというヘッドレスブラウザを
便利に操って
Webサイトを⾃由に操作できる。
• 画⾯のテストをするための便利機能がある。
出典： http://casperjs.org/index.html

4. １．CasperJSを使う
• 簡単に使えます
– CasperJS をインストールする
– PhantomJS をインストールする
– CoffeeScript (またはJavaScript)で書く

5. ２．テストへの活⽤
•影響範囲の⼤きい改修
– PHP バージョンアップ
– 新Package
→ 機能テストに使う
•パフォーマンスの課題
– 商品○○○万件 店舗○千店…
→ データ作成に使う

6. ２．使⽤例(1) 会員登録
•TOP
↓
•規約
↓
•個⼈情報⼊⼒
↓
•確認
↓
•完了
画⾯に沿って、
これを⾃動で
やってもらいます

7. ２．使⽤例(1) 会員登録
• おまじない → TOP

8. ２．使⽤例(1) 会員登録
• TOP → 規約

9. ２．使⽤例(1) 会員登録
• 個⼈情報⼊⼒ → 確認

10. ２．使⽤例(1) 会員登録
• 確認 → 完了

11. ２．使⽤例(2) 店舗登録（たくさん）
• config にこんな感じで設定します

12. ２．使⽤例(2) 店舗登録（たくさん）
• 繰り返し画⾯をたたきます

13. ３．開発者の⽅へ
• ドキュメントは公式がよい
• Stack Overflowなど、英語の情報はまあある
• ⽇本⼈は、画⾯キャプチャとるくらいしかして
ない（⼈が多い）

14. ３．EC－Orangeでのディレクトリ構成
html/core/protected/tests/
+--capture #キャプチャ保存
+--fixtures
| +--functional #テストデータ(機能テスト⽤)
+--functional #機能テスト本体
| +--exec #実⾏ファイル群
| +--routines #各処理のスクリプト群
+--performance #負荷テスト⽤
+-- casper_config.coffee #設定ファイル
+-- casper_routine.coffee #共通処理

15. ３．Tips alertを使う
• こういうのを書いておくと
処理完了alertを待って、次に進める

16. ３．Tips alertを使う
•ちなみに、
alert は勝⼿に OK になります。

17. ３．Tips popup
•Popupの画⾯
– ポップアップが消えて
– 親画⾯が更新されるのを待って
– 親画⾯の表⽰確認

18. ３．Tips popup
•Popupの画⾯
– ポップアップが消えて
– 親画⾯が更新されるのを待って
– 親画⾯の表⽰確認
→ やっかい
eventをうまく制御してやる必要がある と思う。
popup.closed をうまく使って waitFor するとか

19. ３．課題
• 全体を通すテストランナー的なもの
• 冪等性
– データの作り⽅、消し⽅
• ⾃動テスト作成（だれでもテストエンジニア）
– Resurrectio : ⾃動でCasperJSのテストコードを⽣
成するChrome拡張
– js2coffee：JSをCoffeeSciptに変換してくれるサイト

20. ４．まとめ
• あまり触らない個所が知らないうちにデグレな
いために、テストを増やしていきましょう。
• HTMLとEC－Orangeを理解し、
寿命が⻑く、再利⽤の効くコードを。

21. 参考リンク集
http://casperjs.org CasperJS公式
http://casperjs.readthedocs.org/en/latest/index.html
CasperJSドキュメント集
http://coffeescript.org/ CoffeeScript公式
http://yakinikunotare.boo.jp/orebase/index.php?XML%2FXPat
h%2FXPath%A4%CE%BD%F1%A4%AD%CA%FD
XPathの書き⽅
http://www.moongift.jp/2013/12/resurrectio-casperjs向けのテス
トコードをwebブラウザ上で⽣成/ Resurrectio
http://js2coffee.org/ JS→Coffee