デザイン 2015/03/02

各種ブラウザをクラウド上に用意してくれるBrowserStackがすごい

Screenshot: http://www.browserstack.com/

こんにちは、まさきです。皆様元気にお過ごしでしょうか？私は先日1週間ほど胆石で苦しんでおりました。

ブラウザのテスト環境を揃えるのは結構しんどい

皆さんはWebアプリのブラウザ毎の挙動の違いをどのようにテストしていらっしゃいますか？

今どきのブラウザであればそれほど大きな挙動の違いは出ないようですが、OSのバージョンの違いで異なる挙動をすることもあり、すべてのブラウザをすべてのOS環境で実機を用意するのも大変だったりします。

そこでご紹介したいのが、BrowserStack というWebサービスです。

BrowserStackとは？

BrowserStackは実際のブラウザの実行画面をWeb経由で表示・操作できるWebサービスです。選べるブラウザとOSの組み合わせは700以上あり、Windows XP上のIE6といった実機を用意するのも今や難しい組み合わせから、OS X Yosemite上のChrome 41 devといった最新環境まであります。また、エミュレータにはなりますが、iOSやAndroidの各バージョンもサポートしており、必要となる組み合わせはほぼ網羅していると言えます。

詳細な組み合わせリストはこちらから確認出来ます。

でもお高いんでしょ？

はい、残念ながら少し高いです。後述しますが、BrowserStackにはLive、Automate、Screenshots&Responsiveの3つのプロダクトがあり、それぞれ一番安いプランが$39/月、$99/月、$39/月と、気軽に契約するには敷居が少し高いです。

しかし実際にテストするための機器を複数用意したりすることを考えると、お値打ちだと思います。

無料お試しプランが用意されていますので、こちらで使用感を試してみると良いでしょう。

３つのプロダクト

BrowserStackには３つのプロダクトがあります。

Live

手元のブラウザ内に、BrowserStack上で実行しているブラウザの画面を表示しながら、実際に操作することが出来ます。OSやブラウザ、画面サイズをその場で変更してすぐさま実行することが出来ます。また、手元のブラウザにプラグインをインストールする必要がありますが、ローカルネットワークにあるWebサーバへも接続することが出来ます。

Automate

BrowserStack内で実行しているブラウザへ、Selenium経由で接続出来ます。こちらもローカルネットワークにあるWebサーバへ接続出来ますので、公開前のWebアプリのUIテストを様々なブラウザで自動的に行う、といった事ができるようになります。

Screenshots&Responsive

指定したURLを、指定した複数のブラウザで一斉にスクリーンショットを取ることが出来ます。また、様々なブラウザ環境にクリック1つで切り替えて、Webサイトのレスポンシブ対応の状態を確認することが出来ます。こちらもローカルネットワーク内のWebサーバへ接続することが出来ます。

どのプロダクトを選べばいい？

その場でササッと特定の環境でどう表示されるか確認するのであればLiveがいいでしょう。Seleniumでのテスト記述の資産があり、これまで自前でテスト実行用の機材を用意していて、これを整理したい、といった向きにはAutomateがお勧めです。複数のブラウザでの表示状況を一気に取りたいのであればScreenshots&Responsiveが最適です。