大量の差分発生とその抑制について
Last modified by nakatani on 2015/07/28, 10:50
ブラウザのスクリーンショットを比較していると、条件によっては特に文字や画像の表示部位で大量の差分が検出されることがあります。その原因と本ライブラリが実装した対応策を記します。
大量の差分の発生とその原因
本ライブラリを使用してテストを実行する際に、撮影対象として指定した要素以外の部分を変更すると、次の理由によりテストが失敗する場合があります。
- 表示する画像に大量の差分が検出される
- テキストの位置が若干ずれて差分が検出される
- それ以外の画面表示が若干ずれて差分が検出される
この問題は、対象に指定した要素の位置の小数点以下の値が変わってしまった場合に発生します。
ブラウザ上の要素は座標を小数点を含む値として保持しています。
この小数点以下の値を正確に扱おうと試みた結果、画像を拡大・縮小表示した際の丸め誤差やフォントのサブピクセルレンダリングに微妙な差異が生じ、スクリーンショットの差分比較では失敗と扱われるようになります。
ブラウザ毎の調査結果は以下の通りです。
| ブラウザ名 | 状態 |
|---|---|
| Internet Explorer 7 | 小数点以下の座標を持っていない |
| Internet Explorer 8 | 小数点以下の座標を持っているが取得できる値は整数のみ。 横方向はレンダリングに影響するが縦方向は影響しない。 |
| Internet Explorer 9 | 小数点以下の座標を持っているが取得できる値は整数のみ。 縦横両方向のレンダリングに影響する。 |
| Internet Explorer 10/11 Mozilla Firefox Google Chrome | 小数点以下の座標を持ち、取得される値も小数点を含む。 縦横両方向のレンダリングに影響する。 |
ライブラリが実装した対策
この問題に対応するため本ライブラリでは特定の要素を指定したスクリーンショットを撮影する時に、その要素の左上の座標を原点（0, 0）へ移動してスクリーンショットを撮影するモードを実装しました。原点へ移動することで座標の小数点以下の差を無くすことができ、差分検出を大きく抑制することが出来ます。
課題
- Internet Explorer 8や9は内部で小数を扱っているにも関わらず、取得できる値は整数に丸められます。
これらのブラウザで小数点以下の値に起因する差分を無くすことは不可能です。 - Internet Explorer 11では要素を移動したことで逆に座標が小数点以下の値となってしまい、差分が検出される場合があります。