seleniumとNodeJSでchrome firefox safari iphone androidを全画面キャプチャする

スクリーンショット 2016-01-12 10.58.47

ブラウザの表示確認てめんどくさいですよね。

そこでseleniumです。
seleniumはUIテストツールですね。簡単にブラウザのスクリーンショットを撮れるので、表示確認を自動化しちゃいましょう。

今回はchrome firefox safari iphone androidのキャプチャを自動で撮りたいと思います。
iphone androidはchromeのdeveloperツールのエミュレート機能を使ってキャプチャします。
IEは未対応です。MacなのでIE撮るのはめんどくさそう。

まずは、seleniumのダウンロードページから、以下をダウンロードしてきます。

・Selenium Standalone Server
・SafariDriver
・Google Chrome Driver

Selenium Standalone Serverのインストール

動かしたいディレクトリに置くだけです。

javaで動いてるので、java入ってない場合は入れましょう。

firefoxのドライバーは上のseleniumサーバーに同梱されています。

safariドライバーはダウンロードしたらダブルクリックして実行します。
そうするとsafariが立ち上がって入れますよ？みたいなダイアログが出るので、画面通りに入れます。

chromeドライバーはseleniumサーバーと同じ場所に置きました。

次に、Selenium Clientをインスコするのですが、クライアントは Java C# Ruby Python NodeJSがあるので、好きな言語のを使いましょう。

今回はNodejs版を使います。

入れ方はこちら。npm install してるだけですね。

サーバー起動します


$ java -jar selenium-server-standalone-2.48.2.jar -Dwebdriver.chrome.driver=chromedriver

-Dwebdriver.chrome.driver=chromedriverはなくても動いたけど、一度だけやる必要があるのかも

ソースはこちら

適当なところにcloneしてnpm install してください。

中に一緒にserverや各ドライバーも入っていますが、上記で新しいバージョンのを落としてきたほうがいいと思います。

firefoxのキャプチャは画面全体をとってくれるのですが、safari,chromeは見えている部分しかキャプチャ取ってくれません。

そこで、javascriptでスクロールさせて、画面ごとに撮った後に画像をつなげています。

browz.jsの urlsの配列に撮りたいページのURLを記載します


var urls =
[
  'https://x1.inkenkun.com',
  'http://sake.inkenkun.com',
  'http://dangan-trip.com'
];

実行コマンド


$ node browz.js chrome
$ node browz.js safari
$ node browz.js firefox
$ node browz.js iphone
$ node browz.js android

そうするとブラウザが勝手に立ち上がり、「./out/」ディレクトリにスクリーンショットのpngファイルが出力されます。