07.比較対象から除外する
Webページ上にはログインしている人の名前やFacebookのいいねなど、状態によって表示内容が異なるパーツが存在します。その内容をテストすることは重要ですが Pitalium はスクリーンショットを比較してテストするため、名前や数字が少しでも変化すると差分として検出されてしまいます。
Pitalium では特定のDOMをテスト対象から除外することでこの問題に対応します。
要素の除外
IDを指定して要素を除外する
スクリーンショット撮影時にIDを指定して、画面上部の「Facebook いいね」ウィジェットのDOMを除外するサンプルを以下に示します。
import java.util.List;
import org.junit.Test;
import com.htmlhifive.pitalium.core.PtlTestBase;
import com.htmlhifive.pitalium.core.model.CompareTarget;
import com.htmlhifive.pitalium.core.model.ScreenArea;
import com.htmlhifive.pitalium.core.model.SelectorType;
public class SampleTest extends PtlTestBase {
@Test
public void testExclude() throws Exception {
// 1. hifiveサイトのトップページを開きます。
driver.get("https://www.htmlhifive.com/");
// 2. 画面全体のスクリーンショットを撮影する設定を作成します。
// ただし、画面上部の「Facebook いいね」ウィジェットを除外します。
ScreenshotArgument arg = ScreenshotArgument.builder("TopPageExcludeFBLike")
.addNewTarget()
.addExcludeById("fb_share")
.build();
// 3. スクリーンショットを撮影します（比較を実行します）
assertionView.assertView(arg);
}
}
特定のDOMを除外対象とするには、addExcludeBy* メソッドで除外対象を指定します。
今回は、除外対象の要素をID "fb_share" で指定するため、addExcludeById("fb_share") としています。
これをbuilderに指定することで、指定したDOMを除外したスクリーンショットを撮影できます。
※addNewTarget() に引数を指定しない場合、画面全体（bodyタグ全体）が撮影されます。
CSSクラスを指定して除外設定をする
次に、除外するための条件をIDではなくCSSクラスを指定し、複数の要素を同時に除外対象にする例です。ScreenAreaで指定した要素が複数個存在しても、ライブラリはその全てを除外の対象とします。全てのスライダー表示内容を除外条件に設定することで、スクリーンショットを撮影したタイミングでスライダーが変化していても差分を検出することなくテストを行うことが出来ます。
import java.util.List;
import org.junit.Test;
import com.htmlhifive.pitalium.core.PtlTestBase;
import com.htmlhifive.pitalium.core.model.CompareTarget;
import com.htmlhifive.pitalium.core.model.ScreenArea;
import com.htmlhifive.pitalium.core.model.SelectorType;
public class SampleTest extends PtlTestBase {
@Test
public void testExclude() throws Exception {
// 1. hifiveサイトのトップページを開きます。
driver.get("https://www.htmlhifive.com/");
// 2. 画面全体のスクリーンショットを撮影する設定を作成します。
// ただし、スライダーで表示されている内容を除外設定にします。（
ScreenshotArgument arg = ScreenshotArgument.builder("TopPageExcludeSlider")
.addNewTarget()
.addExcludeByClassName("item")
.build();
// 3. スクリーンショットを撮影します（比較を実行します）
assertionView.assertView(arg);
}
}
除外した要素の出力結果
ある要素を除外設定してスクリーンショットを撮影しても、保存される画像は除外設定をしない状態と同じものが出力されます。除外した要素の情報は以下の様にJSONファイルに出力され、画像の比較検証時のみ利用されます。
{
"target": {
...
},
"excludes": [
{
"selector": {
"type": "ID",
"value": "fb_share",
"index": null
},
"rectangle": {
"x": 985.0,
"y": 10.0,
"width": 90.0,
"height": 29.0
},
"screenArea": {
"selector": {
"type": "ID",
"value": "fb_share"
}
}
}
],
...
}
]
要素の非表示
Webページ上にはログイン情報の様な「固定表示位置で表示内容が動的に変わる」パーツ以外にも、例えばスクロールによって表示位置が変化したり、初めて表示されるパーツもあります。hifiveトップページでは「トップへ戻る」がスクロールによって表示されます。スクロールによって表示される様な動的に変化するパーツはスクリーンショット比較において、比較対象に重なって表示され期待する比較が出来ないことや、パーツそのものの表示が安定しないことが多々あります。
本ライブラリではこのような要素を画面上から非表示とすることで対応が可能です。
クラスを指定して要素を非表示にする
hifiveトップページのスクリーンショットを撮影すると「トップへ戻る」が差分として検出されます。以下のサンプルでは「トップへ戻る」を非表示として設定し差分を抑制します。
import java.util.List;
import org.junit.Test;
import com.htmlhifive.pitalium.core.PtlTestBase;
import com.htmlhifive.pitalium.core.model.DomSelector;
import com.htmlhifive.pitalium.core.model.SelectorType;
public class SampleTest extends MrtTestBase {
@Test
public void testHidden() throws Exception {
// 1. hifiveサイトのトップページを開きます。
driver.get("https://www.htmlhifive.com/");
// 2. 画面全体のスクリーンショットを撮影します。
// ただし「トップへ戻る」を非表示とします。
ScreenshotArgument arg = ScreenshotArgument.builder("TopPageHidden")
.addNewTarget()
.addHiddenElementsByClassName("gototop")
.build();
// 3. スクリーンショットを撮影します（比較を実行します）
assertionView.assertView(arg);
}
}
特定の要素を非表示とするには、非表示にするDOMの情報をaddHiddenElementsBy* メソッドで指定します。
これをTarget等と一緒にbuilderに指定することでDOMを非表示にすることが出来ます。
要素を非表示に設定すると、指定したDOMが非表示の状態で撮影されたスクリーンショットが保存されます。
動作確認
以下のテストを SET_EXPECTED / RUN_TEST の両方で実行し、差分が出ないことを確認します。このテストコードは
- 可変のスライダーを除外して差分としない
- 可変のFacebookいいね一覧を除外して差分としない
- 「トップへ戻る」矢印を非表示として動的に表示されるパーツを差分としない
の3つの問題に対応しています。
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.junit.Test;
import com.htmlhifive.pitalium.core.PtlTestBase;
import com.htmlhifive.pitalium.core.model.CompareTarget;
import com.htmlhifive.pitalium.core.model.DomSelector;
import com.htmlhifive.pitalium.core.model.ScreenArea;
import com.htmlhifive.pitalium.core.model.SelectorType;
public class SampleTest extends PtlTestBase {
@Test
public void testTopPage() throws Exception {
// 1. hifiveサイトのトップページを開きます。
driver.get("https://www.htmlhifive.com/");
// 2. 画面全体のスクリーンショットを撮影します。
// ただしスライダーで表示されている内容およびFacebookのいいね一覧ウィジェットを除外設定にします。
// また「トップへ戻る」を非表示とします。
ScreenshotArgument arg = ScreenshotArgument.builder("TopPage")
.addNewTarget()
.addExcludeByCssSelector(".carousel.slide")
.addExcludeByCssSelector(".fb-like-box.fb_iframe_widget")
.addHiddenElementsByClassName("gototop")
.build();
Thread.sleep(TimeUnit.SECONDS.toMillis(10L));
// 3. スクリーンショットを撮影します（比較を実行します）
assertionView.assertView(arg);
}
}
次のステップ ⇒ 08.期待結果の再定義