概要

Selenium GridとAppiumを用いた、マルチデバイス画面テストライブラリ。

概要

Seleniumのテストコードを各ブラウザで実行、スクリーンショットを取得して期待結果と画像比較をすることでテストを行います。

機能一覧

スクリーンショット取得

Webページ全体の画像、および特定の領域のみの部分画像の取得ができます。

全体スクリーンショット取得

縦スクロールがあってもページ全体(body)のスクリーンショットが取得できます。
※ 横スクロールのあるページ、およびスクロール時に遅延ロードでページの内容が増えるものは未対応(一部のブラウザのみ対応)

部分スクリーンショット取得

セレクタもしくはxpathで指定した対象のDOM要素のスクリーンショットを取得できます。
※ DOMにスクロールがある場合は未対応（現在の表示内容のみ取得します。）

指定した要素を非表示にする

指定したDOM要素を非表示にしてスクリーンショットを取得できます。
※ 現在は、出す/出さないの指定ができるのみ

表示内容の検証（画像比較）

あらかじめ生成していた正解画像（スクリーンショット）と、今回取得したスクリーンショットの画像を比較し、画像として一致するかの判定を行います。
判定の結果、不一致となった場合は、diff画像を生成します。

ページ全体の表示内容の検証

ページ全体のスクリーンショット同士の比較を行います。

特定のDOMの表示内容の検証

セレクタまたはxpathによって指定したDOM要素のスクリーンショットの比較を行います。
部分画像で比較を行うため、ページ内のDOM要素の位置に無関係に比較を行うことができます。
※ Internet Explorer8および9では位置が異なる場合、同じ画像を比較しても正解にならないことがあります。
　（参照：大量の差分発生とその抑制について）

指定した範囲を比較の対象外とする

広告や時刻のようにアクセス時に毎回内容が変わる場合、その領域を比較の対象外とすることができます。
現在は、指定したDOM要素を対象外とすることができます。

マルチデバイステスト実行

Selenium Gridを使用して複数ブラウザ・端末でテストを実行することができます。
本ツールでは、そのための基底クラス、およびRuleクラスを提供しています。

並列実行

Selenium Gridの仕様に則り、複数ブラウザ・端末で並列でテストの実行を行うことができる。
１度テストを実行したときには、フォルダが１つ作られ、その下にテストクラスごとにすべてのブラウザの結果が格納される。

実行モード

本ツールは3種類の実行モードの切り替えが可能です。

• 正解定義モード（SET_EXPECTED）：スクリーンショットを取得し、正解画像として登録するモードです。ここで取得した結果画像が「テスト実行モード」で実行したときの期待結果となります。
• テスト実行モード（RUN_TEST）：スクリーンショットの取得し、正解画像と比較することでテストの合否判定をするモードです。
• スクリーンショット取得モード（TAKE_SCREENSHOT）：スクリーンショットの取得のみを行うモードです。開発中の動作確認などに使います。

対象ブラウザ

本ツールは以下で動作します。
※ 基本的にSelenium Grid・Appiumの動作対象に準じます。

※リキッドなレイアウトの画面の場合、Internet Explorerのスクリーンショットではページの一番下が切れてしまうことがある

既知の不具合

主な不具合を下記に挙げます。すべての不具合はgithubのissueページをご参照下さい。

• targetに指定した要素の高さを子要素の高さの和が超えていると、はみ出た子要素はスクリーンショットに含まれない
• excludeで指定した要素の高さを子要素の高さの和が超えていると、はみ出た子要素はマスクされない
• ページ全体のスクリーンショットで下部が切れる(Android 2.3)
• 予想外のdiffが発生する(Internet Explorer 8/9、Android2.3)