はじめに
複数ブラウザ/複数スマホ端末のテストを効率化できないか？との相談を受けました。BtoC向けではエビデンスのためにスクリーンショットをとるプロジェクトも多いのですが、社内で色んな人に聞いてみたところ基本的に人海戦術とのこと・・・・。
いやいや、、あるだろ。と思い、いろいろ調べた所「AdobeEdgeInspect」「BrowserSync」がよさそうなので早速試してみました。
AdobeEdgeInspect
WIFIに接続されている端末をまとめて操作することができます。ホストとなるブラウザはChromeに限定されており、Chromeに拡張機能をインストールすることで実現できます。
無償版では１端末のみぶら下げることができますが、有償版でぶら下げる端末は無制限です。（2014年11月時点では１ライセンス2980円でした）
インストール・設定方法
インストールの手順などはページをみればわかりますので詳細は割愛しますが、BrowserSyncに比べると若干面倒です。そもそもAdobeCreateCloudへのユーザ登録が必要です。
１．ホストとなるコンピュータにインストールするもの
・AdobeEdgeInspect本体
・Chrome
・Chromeの拡張
２．ゲストとなるコンピュータにインストールするもの
・AdobeEdgeInspect
３．ホストの端末、ゲストとの端末を同一のネットワークに参加させる
４．ゲストとなる端末でEdgeInspectを開き、ホストのコンピュータが表示されるのでクリックして接続します。
このとき、認証番号が表示されるので、ホスト側のコンピュータのChromeの拡張で認証番号を入力します。
５．あとはホスト側のコンピュータのChromeの画面でグリグリブラウジングするだけです。
（スマホのテストなどをやる場合は、ホスト側のChromeにFireMobileSimulatorやUserAgentSwitcherを入れれば良いと思います。）
使ってみた結果
・スクリーンショットを複数端末同時に撮れる
・スクリーンショットは長いページなどには対応していない（涙）
nodejs + BrowserSync
http://www.browsersync.io/
http://nodejs.org/
yumとnpmを使えばインストールが超カンタンです。何が凄いって入力内容やイベントまでも同期してくれます。インストールも簡単ですしぜひ使ってみてください。
いろいろググるとgulp使って動かす方法が紹介されていますが、あえてgulpを使う必要はありません。
インストール・設定手順
下記手順はLinux版の手順です。
１．node.jsをインストールします。最近はyumで入れられるのです。
yum install nodejs npm --enablerepo=epel
２．browser-syncをインストールします。
npm install -g browser-sync
３．browser-syncのプロセスを立ち上げます。
今回は開発したappサーバを監視対象にしたかったので--proxyオプションを使ってプロキシ先のサイトを監視してみることにしてみました。
３−１．apacheをインストールし、apacheを81番Portであげます。
３−２．DocumentRootに下記２つのコンテンツを置きます。
<body>
<h1>1ページ</h1>
<h2>Hello <div id='text'></div></h2>
<div>
<Button onclick='world()'>Click!!</Button>
<div id='text'></div>
<hr>
text <input type="text" name="foo" />
<hr>
<br>radio
<input type="radio" name="hoge" value="1"/>:1
<input type="radio" name="hoge" value="2"/>:2
<hr>
<br>textarea
<textarea cols="50" rows="8"></textarea>
<hr>
<a href="index2.html">2ページ目へ</a>
</div>
<script>
world = function() {
document.getElementById('text').textContent += 'world!';
}
</script>
</body>
<body>
<h1>2ページ</h1>
<h2>Hello <div id='text'></div></h2>
<div>
<Button onclick='world()'>Click!!</Button>
<div id='text'></div>
<hr>
text <input type="text" name="foo" />
<hr>
<br>radio
<input type="radio" name="hoge" value="1"/>:1
<input type="radio" name="hoge" value="2"/>:2
<hr>
<br>textarea
<textarea cols="50" rows="8"></textarea>
<hr>
<a href="index.html">1ページ目へ</a>
</div>
<script>
world = function() {
document.getElementById('text').textContent += 'world!';
}
</script>
</body>
３−３．browser-syncを起動します。
コマンド一発です。
sudo browser-sync start --port 80 --proxy localhost:81 --files "**" &
localhost:81であがっている全てのコンテンツを監視するサーバをPort80でListenしてくれ。という意味です。
browser-syncのdefault portは3000番ですが、社内から3000番Portへのアクセスが開いていなかったので80番Portに変えています。
ちなみにdefaultの3000番Portで起動しようとした時にrubyが3000番で上がっている場合は勝手に3001番に変えてListenしてくれます。
使ってみた結果
・入力内容・イベント・ページ遷移などが同期できました。
・AdobeEdgeInspectと違いホストとなるコンピュータという概念はなく、どれかの端末で入力した内容が他の端末に同期されます。
・長い画面でもスクリーンショットが取れるアプリを入れておけば、画面操作したあとに、各端末でスクリーンショット連発の繰り返しになるので作業効率が上げられそうです。
・今回はローカルのPort81であがっているサービスを監視しましたが、ReverseProxyを使えばグローバルにあるサイトのコンテンツの監視も可能です。（ただ、、、ホスト名解決の部分でもう一工夫が必要なのでこれは別の機会に紹介します。）