CasperJSによる機能テスト⾃動化

画像： http://docs.casperjs.org/en/latest/

もくじ

1. はじめに

2. 機能テストへの活⽤

3. 開発者の⽅へ

4. まとめ

1.CasperJSとは

• CasperJS is an open source navigation scripting navigation scripting navigation scripting navigation 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

１．CasperJSを使う

• 簡単に使えます

– CasperJS をインストールする

– PhantomJS をインストールする

– CoffeeScript (またはJavaScript)で書く

２．テストへの活⽤

•影響範囲の⼤きい改修– PHP バージョンアップ– 新Package

 → 機能テストに使う  •パフォーマンスの課題

– 商品○○○万件 店舗○千店… → データ作成に使う

２．使⽤例(1) 会員登録

•TOP ↓•規約 ↓•個⼈情報⼊⼒ ↓•確認 ↓•完了

画⾯に沿って、これを⾃動でやってもらいます

２．使⽤例(1) 会員登録

• おまじない → TOP

２．使⽤例(1) 会員登録

• TOP → 規約

２．使⽤例(1) 会員登録

• 個⼈情報⼊⼒ → 確認

２．使⽤例(1) 会員登録

• 確認 → 完了

２．使⽤例(2) 店舗登録（たくさん）

• config にこんな感じで設定します

２．使⽤例(2) 店舗登録（たくさん）

• 繰り返し画⾯をたたきます

３．開発者の⽅へ

• ドキュメントは公式がよい• Stack Overflowなど、英語の情報はまあある

• ⽇本⼈は、画⾯キャプチャとるくらいしかしてない（⼈が多い）

３．EC－Orangeでのディレクトリ構成

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

３．Tips alertを使う

• こういうのを書いておくと

処理完了alertを待って、次に進める

３．Tips alertを使う

•ちなみに、 alert は勝⼿に OK になります。

３．Tips popup

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

３．Tips popup

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

→ やっかい  eventをうまく制御してやる必要がある と思う。  popup.closed をうまく使って waitFor するとか

３．課題

• 全体を通すテストランナー的なもの

• 冪等性– データの作り⽅、消し⽅

• ⾃動テスト作成（だれでもテストエンジニア）– Resurrectio : ⾃動でCasperJSのテストコードを⽣

成するChrome拡張– js2coffee：JSをCoffeeSciptに変換してくれるサイト

４．まとめ

• あまり触らない個所が知らないうちにデグレないために、テストを増やしていきましょう。

• HTMLとEC－Orangeを理解し、寿命が⻑く、再利⽤の効くコードを。

参考リンク集

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%2FXPath%2FXPath%A4%CE%BD%F1%A4%AD%CA%FD

XPathの書き⽅http://www.moongift.jp/2013/12/resurrectio-casperjs向けのテストコードをwebブラウザ上で⽣成/ Resurrectiohttp://js2coffee.org/ JS→Coffee