Mochaという組み合わせを見つけたので勉強してみました。PhantomJSとは?ブラウザです。JavaScriptのAPIを通じて制御できるヘッドレス(画面のない)Webkitブラウザらしいです。試せてませんがCanvasやSVGにも対応してるっぽい。インストールhttp://phantomjs.org/download.htmlよりダウンロードしPATHを通すことで使用できます。Macでhomebrewが入って入れば以下でOK。phantomjsPhantomJS準備運動まずは以下のようなhello.jsを用意します。phantom.exit();});以下のように実行します。hello.jsこれでGoogleのスクリーンショットがとれます。(スクリーンショットをとったのは節分です。windowサイズもJavaScriptで変更できるし、これだけでも色々応用できそう。Mochaとは?node.jsやブラウザから実行できるテストフレームワークです。インストールnpmでいれてもいいし、ブラウザで実行するなら"mocha.css"、"mocha.js"のみ持ってきたらよいようです。今回の例ではブラウザで実行させるため、以下より"mocha.css"、"mocha.js"をダウンロードしておきます。https://github.com/mochajs/mochaあと、Mochaはテスティングフレームワークのみで、アサーションは別のライブラリを用いる必要があるようです。調べたところ、今回はよさげなchaiを使用します。http://chaijs.com/こちらもブラウザで使用するためhttp://chaijs.com/chai.jsよりダウンロードしておきます。Mocha準備運動こんな感じでテストができるよーってサンプルです。加算するadd関数をテストしています。</body></html>test.htmlをブラウザで開くと以下のようにテスト結果が出力されます。MochaでのクライアントJavaScriptのテスト準備ようやく本題。Mochaでテストの準備をする。問題はMochaがPhantomJS上での動作に対応していないようです。以下を参考にさせてもらいました。pixel|サイバーエージェント公式クリエイターズブログここでPhantomJSで動作するよう修正したものが公開されているので使用させてもらいます。GitHubテスト対象ページ簡単に今回はこんなので試してみます。画像を重ねておいて、クリックするとフェードインします。バージョンはなんでもいいですが(たぶん)jqueryも使用します。</script></body></html>テストコードこっからはCoffeeScriptです。流れはこんな感じです。chaiの読み込みindex.htmlをオープン、キャプチャをとり、jqueryを読み込み画像の座標、フェードインする画像のdisplayプロパティを取得クリック前のdisplayプロパティが"none"であることをテスト画像の座標をクリックし、1秒待つクリック後のキャプチャを取得、クリック後のdisplayプロパティが"block"であることをテストこれだけだけど、大分はまりました。test.jsテスト後に"before_click.png"と"after_click.png"が生成されているかと思います。Pageのコンテキストで評価されます。この実行はサンドボックス化されているため、PhantomJSと直接やりとりできません。Pageのコンテキストで評価されてしまい、PhantomJS側には何も表示されません。これはonConsoleMessageを使うことで対処できるようです。msgとしておけばPhantomJS側のコンソールに吐かれます。Page側とで値をやり取りするには、evaluateメソッド呼び出しの引数や戻り値を使えばいいようです。$('img.icon-over').css('display')でCSSプロパティを取得したりしています。受け渡し可能なデータはJSONにシリアライズ可能なオブジェクトに限定されます。クロージャや関数オブジェクトを使ってやりとりすることはできません。やってみてPhantomJS上でMochaを使うかどうかはおいといて、PhantomJSだけでも使いこなせればめちゃめちゃ便利な気がするアプリケーションによってはキャプチャの差分を取って合致しているかどうかの判定処理まで入れてしまえば完全な自動化もできる?(canvasで取り込んでpixelベースの比較をしてやるとか?わかんないけど)PhantomJSはwebkitなので、他のブラウザはseleniumとか使わなきゃ?スマホページでこそ真価を発揮するかもただし、参考サイト(http://ameblo.jp/ca-1pixel/entry-11549761391.html)にあるように「JSでDomを追加してイベントを設定した要素に対し、イベントの発火ができない」とか不便な点もあるようなかなかおもしろかったリポジトリめんどくさいので全部ごっちゃだけどあげときます。Phantomjsでスクレイピングしてスクリーンショットとニュースの見出しをとるElixir関連の記事を眺めていたら以下の記事を見つけた。bmsjs(α版)というWEBサービスをリリースしました。bmsjs...2015-05-17particle2dxでソードアート・オンライン風のエフェクトを作成し再生する以前紹介したParticle2dxで遊んでみました。12引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。