Pitalium Explorerによるスクリーンショット比較方法について

Pitaliumを使うとスクリーンショットベースのテストができます。そしてもしエラーが発生した際にはPitalium Explorerを使って正解時の画像と、失敗時の画像を比べることができます。

今回はその画像の比較方法を紹介します。

Quick flipping

前後の画像を切り替えて表示します。同じ場所を切り替えるので、ちょっとした変化に気付くことができるでしょう。上部の「Expected」「Actual」のタブをクリックすることで、表示する画像を切り替えられます。

2-up

二つの画像を左右に並べて比較します。高さにずれがあったりする場合は、2-upが気付きやすいでしょう。

Swipe

二つの画像を重ねて表示し、スライダーを使って左右を切り替えます。前後のコンテンツで水平方向の差異があった時に便利です。

Onion skin

スライダーで徐々に画像を切り替えます。透明度を差し替えているので、コンテンツが異なる場合は表示がおかしいと感じるはずです。

Edge overlapping

スクリーンショットのエッジ（輪郭）を検出して、その差異を表示します。青と赤のラインで異なって表示されるので、どこが異なるかは一目瞭然でしょう。ただしエッジなので、背景色が異なるといった場合は分かりません。

細かいところはルーペで確認できます。

基本的にはEdge overlappingでだいたいの確認はできますが、色の違いなどSwipeを使って検出することになるでしょう。それぞれの機能を使い分けて、効率的なテスト結果確認を行ってください。