はじめに

普段おこなっているテストの中でマルチブラウザ間での表示差異を確認するようなテストがあります。
ただし、これらをすべて手動で確認するのは時間がかかるため、自動化して対応しています。
今回は、マルチブラウザでフルスクリーンショットを取得するOSSを公開したので、簡単な使い方を記載します。
※表示差異の確認はこのOSSには含んでいません。

Dockyard - Capture

公開したOSSはこちらになります。
このOSSはWindows、Macで動作するブラウザのフルスクリーンショットをCSVファイルに対象URLを記載するだけで取得することができます。
詳しい使い方はREADMEに書いてありますが、以降ではREADMEから一部抜粋して最低限の使い方を記載します。

環境情報

Java11〜15に対応しています。

使い方

ソースコードを取得

git clone https://github.com/humancrest/DockyardCapture.git

CSVファイルを用意

以下ディレクトリにサンプルのCSVファイルが格納されています。

/DockyardCapture/src/test/resources/sample.csv

CSV配置場所はPC上のどこでも問題ありませんが、今回はこちらのファイルを編集し使用します。

0,hc-top,https://www.humancrest.co.jp
1,ques-top,https://quesqa.com/

CSVファイル記入方法

CSVファイルは以下形式で記載します。

文字コード: UTF-8
CSVファイル記載形式（Nameは1バイト文字で記載してください）

(No), (Name), (URL)

実行

CSVファイルを記入したら、以下のコマンドでスクリーンショット取得処理を開始します。

cd DockyardCapture
./gradlew run --args="-fn ./src/test/resources/sample.csv -osn mac -brn chrome"

結果確認

スクリーンショット取得処理が終了すると以下のフォルダへスクリーンショットが格納されます。

/DockyardCapture/test-result/results/chrome

今回はchromeというフォルダ名ですが、実行するブラウザごとのフォルダが作成されます。

実行引数について

引数	説明	例
--fileName -fn	CSVファイルのファイル名。（ファイルパスを含む）	--fileName input.csv
--browserName -brn	スクリーンショットを取得したブラウザ名	--browserName chrome (chrome,firefox,edge, safari)
--osName -osn	実行するOS名	--osName mac (mac, win)

注意事項

timelineのようなページの終わりのないサイトでは、正しくスクリーンショットが取得されない可能性があります。
スクリーンショットのWIDTHは1920pxで取得されます。

今後

現在は1ブラウザごとにしかスクリーンショットを取得できませんが、今後こちらのOSSでは、RemoteWebdriverへの対応や並列実行にも対応していく予定です。

最後に

今回初めてOSSを公開しました。
まだ分からないことも多いですが、少しずつ更新していけたらと思っています。
また、プルリクエストやご要望もお待ちしています。