モンモンブログ

技術的な話など

jasmine + スクリーンショット作成サービスでWebアプリを複数ブラウザで一括動作確認!

この投稿は JavaScript - Client Side - Advent Calendar 2013 の13日目の参加記事です。

JavaScript のテスティングフレームワーク jasmine でテストを書いておくと、コードをいくらいじってもブラウザのリロード一発で動作確認できてそれだけでもステキです()。

でも更に、「スクリーンショット作成サービス」と組み合わせて利用すれば、複数の OS の複数のブラウザで一気にまとめて動作確認できてしまってステキングです。

このエントリでは、

  1. スクリーンショット作成サービスをいくつか紹介して、
  2. それら + jasmine による一括動作確認の方法について書いて、
  3. 最後に実際にやってみた例を紹介

します。

それではGO。

スクリーンショット作成サービス

を、2つ+αほど紹介。

1. browserstack.com の Screenshots

f:id:ymdsmn:20131211183553p:plain

動作確認したいページのURLを入力して、めぼしいブラウザを選択して(デフォルトで20ブラウザ選択済、最大25まで選択可)、画面一番下の "Generate screenshots" をクリックすると、

f:id:ymdsmn:20131211183558p:plain

こんな風にぞくぞくとスクリーンショットが送られてくる。

対応OS、対応ブラウザが盛りだくさんでステキ。なにより、スマホ対応なサービスってここしかないかも。

縦に長いウェブページも、画面の上から下までスクロールして撮ってくれます(確認した限り、多分全ブラウザで)。

欠点は、一度に25ブラウザまでしか選択できない点。(月額払えばこの制限はなくなる??)

また、無料で撮れるスクショ数はトータル100件までです。動作確認するブラウザを絞ってうまく利用しないといけない。Screenshots だけの利用であれば、月額$19でこのリミットはなくなるみたいです。

2. browsershots.org

f:id:ymdsmn:20131211190156p:plain

Linux, Windows, Mac, BSD に対応。

無料アカウント登録さえすれば、ブラウザ数の制限なしで、一気にまとめてスクショが撮れちゃうのがステキすぎる。アカウント登録なしでも1日あたり100ブラウザ?くらいまでなら多分利用可能。

LinuxBSD 対応ってのも、動作確認するサービスによっては重要でしょう。

撮ったスクショには有効期限があり、無料アカウント登録すれば30分、アカウントなしなら14分。

欠点としては、スクショを撮るホスト&ブラウザの提供を有志に頼っているため、対応ブラウザがちょこちょこ変動します。ついこないだは Mac の対応ブラウザは Safari が2つあったはずなのに、今みたら Mac の対応ブラウザ数ゼロになってた。。。

また、僕が見てる限り Mac の登録ブラウザ数が少ないです。(これはたまたまなのか、常にこうなのか?)

あと、スクロールの必要なページの場合でも、画面の1番上だけしか撮ってくれません。

とはいえ、Windows の対応ブラウザの多さと、無料でこれだけ多数のブラウザのスクショをまとめて一気に撮れるというのは強いです。

ちなみに、画面下の方のボタンで Windows ブラウザのみ全て選択、とか出来ます。

3. その他のサービス

screenshots.jp
月額払わないとスクショの撮れるブラウザが少なすぎるので試してないです(´・ω・`) 主要OSの主要ブラウザは対応しているようです。

browsershots.at
撮れるのは Windows VistaFirefox のみ(´・ω・`)

jasmine のテスト結果をまとめてスクリーンショット

さて、

これらスクリーンショット作成サービスで jasmine のテスト結果のスクショを撮れば、

色んな環境でズガッとまとめて動作確認出来ちゃうぜ!というのが今回のお話。

ブラボー!おお・・・ブラボー!!

f:id:ymdsmn:20131211185020j:plain

ただ、jasmine のテスト結果って画面一番下に表示されるから、1画面に収まるようなコンパクトなWEBアプリケーションでもない限り、スクショ一覧画面のサムネイルでは確認出来そうにないです。

いちいちサムネイルをポチポチクリックして、個別の画像を開いて、画像の一番下までスクロールして確認しないといけない。それってめんどくさい。(ていうか browsershots.org の場合は画面1番上しか撮れないのでそれすら無理。)

どうせなら、スクショ一覧画面でサムネイルを眺めるだけでテスト結果を確認したいですよね。

じゃー CSS or JavaScript で、jasmine のテスト結果を画面1番上に移動しちゃえばいいんじゃない?

jasmine テスト結果を画面1番上に表示させるには

jasmine-1.3.1 と jasmine-2.0.0-rc5 とで調べてみました。それぞれ、テスト結果を収めてるDOM要素がちょこっと異なります。

jasmine-1.3.1 の場合

テスト結果は id="HTMLReporter" な div に収められてます。

CSSでやるなら

#HTMLReporter {
  position: absolute;
  top: 0px;
  width: 100%;
  background-color: white;
}

jQuery でやるなら、

jasmineEnv.execute();

を呼んでる箇所の直後に

$('#HTMLReporter').remove().prependTo('body');

でオッケー。

jasmine-2.0.0-rc5 の場合

テスト結果は class="html-reporter" な div に収められてます。

CSSでやるなら

.html-reporter {
  position: absolute;
  top: 0px;
  width: 100%;
  background-color: white;
}

jQuery でやるなら、boot.js の下の方にテストをキックしてる箇所があるので、その直後に以下のように1行追加してやればいける。

  // ...
  window.onload = function() {
    if (currentWindowOnload) {
      currentWindowOnload();
    }
    htmlReporter.initialize();
    env.execute();                  // <-jasmineテスト実行
    // 以下を追加
    $('div.html-reporter').remove().prependTo('body');
  };
  // ...

実際にスクショを撮ってみた

拙作の jQuery プラグイン jquery.narrows.jsサンプルページ兼テストページ(の、テスト結果を一番上に移動したversion)で実験してみました。

まずは Screenshots

f:id:ymdsmn:20131212043922p:plain

サムネイルだけ眺めても大体分かりますよね?サムネイルのてっぺんに緑のバーが出ていれば成功、赤のバーならテスト失敗です。

  • Windows 7 の IE8(中段左から2番目)で赤いバーが出てるのが見える。テスト失敗してますがな。 元サイズの画像を開いて、エラーの内容も確認出来た。
  • Amazon Kindle Fire 2, Amazon Kindle Fire HD, Google Nexus 7 では、23個のテストすべて終了する前の時点のスクショが撮れてしまってた(そのため青っぽいバーが見えてます)。ひょっとして Kindle や Nexus は JavaScript の実行速度が遅いんでしょうか? iPhoneiPad はちゃんと成功してるのにな?
  • 一番最後の iPad 3rd (7.0)(びっくりマークのやつ)はタイムアウトした模様。ブラウザが多すぎると、最後の方のブラウザはこんな風にタイムアウトしてしまうっぽい。
  • IE6, IE7(上段右端、中段左端)だけ、テスト結果がどこにも表示されてませんでした…。JavaScript がオフなのか、jasmine が実行できてないのか、それともさっき追加した CSS がいけないのか、不明。

次に browsershots.orgWindows の全ブラウザのみ選択して、試してみました。

f:id:ymdsmn:20131211193108p:plain

105ものブラウザのスクショをリクエストしても粛々と任務遂行してくれるこの度量の深さ。ありがたいことです。(ここに表示してるのは一部のみです。)

  • MSIE 8.0, Firefox 1.0.8, Netscape 8.0.4, Netscape 7.1 でエラーを確認。 MSIE 8.0 でのエラーはさっきの結果と矛盾しません。それ以外のブラウザでのエラーは単に古すぎるためのようです。
  • いくつかのブラウザで、スクショ作成サーバの起動か何かに失敗していて、スクショが正常に撮れていませんでした(デスクトップにコマンドプロンプトだけ表示されてるやつとかです)。有志さん頼りな以上、こういうエラーはある程度仕方ないんでしょう。

こんな感じでした。なんだか色んなケースが確認出来てこれはいいサンプル(自画自賛)。

そして期せずして、jquery.narrows.js が IE8 で動作しないことが分かっちゃいました。直さなくちゃ…。僕Windowsマシン持ってないので、これ、そうそう気付けないバグですよ。

すごくない?(・ω・)-3

まとめ

みんな jasmine でテスト書こうよ。いいから書こうよ。