ツール・ライブラリ » Pitalium(hifiveリグレッションテストライブラリ) » チュートリアル（Pitalium:hifiveリグレッションテストライブラリ） » 06.スクロールのあるDOM要素のスクリーンショット

06.スクロールのあるDOM要素のスクリーンショット

Last modified by msakai on 2016/09/06, 13:57

Pitalium

Pitaliumでは、テスト対象のDOM要素にスクロールがある場合、スクロールで隠れている部分を含めてスクリーンショットを撮影するか否かをオプションで指定することができます(v1.1.0以降）。
ここでは、オプションを指定してスクロールありのDOM要素を撮影する方法を示します。

指定方法
サンプル
- scrollTarget=false を指定した場合
- scrollTarget=true を指定した場合
参照

指定方法

CompareTarget作成時に、引数で指定します。
CompareTargetのコンストラクタAPIは次のようになっています。

CompareTarget(ScreenArea compareArea, ScreenArea[] excludes, boolean moveTarget, boolean scrollTarget)

プロパティ	型	説明
compareArea	ScreenArea	比較対象のDOM要素または領域
excludes	ScreenArea[]	比較時に除外するDOM要素または領域の配列
moveTarget	boolean	スクリーンショットを取得する前に、要素を原点(0, 0)に移動するか
scrollTarget	boolean	要素がスクロールできる場合、スクロール分を含めてスクリーンショットを撮影するか

※ moveTargetについてはこちらを参照ください。 ⇒ 大量の差分発生とその抑制について - hifive

scrollTargetにtrueを指定すると、スクロールで隠れている部分を含めてスクリーンショットを撮影します。
デフォルト（指定しなかった場合）はfalseです。

サンプル

次のページを使って例を示します。
部分スクロールテスト用サンプルページ - hifive

scrollTarget=false を指定した場合

import java.util.ArrayList;
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 takePartialScrollScreenshotTest() {

// 1. テスト用ページを開きます。
driver.get("https://www.htmlhifive.com/conts/web/view/pitalium-samples/partial-scroll");

// 2. moveTarget=false を指定して比較対象を作成します。
ScreenshotArgument arg = ScreenshotArgument.builder("ScrollTestPage")
                                                         .addNewTargetById("sample-scroll-div").scrollTarget(false)
                                                         .addNewTargetById("sample-scroll-textarea").scrollTarget(false)
                         .addNewTargetByCssSelector("#sample-scroll-table tbody").scrollTarget(false)
                         .addNewTargetByName("sample-scroll-iframe").scrollTarget(false)
                                                         .build();

// 3. 比較対象を使用して検証を実行します。
assertionView.assertView(arg);

}
}

結果画像は以下のようになります。

scrollTarget=true を指定した場合

import java.util.ArrayList;
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 takePartialScrollScreenshotTest() {

// 1. テスト用ページを開きます。
driver.get("https://www.htmlhifive.com/conts/web/view/pitalium-samples/partial-scroll");

// 2. moveTarget=true を指定して比較対象を作成します。
ScreenshotArgument arg = ScreenshotArgument.builder("ScrollTestPage")
                                                         .addNewTargetById("sample-scroll-div").scrollTarget(true)
                                                         .addNewTargetById("sample-scroll-textarea").scrollTarget(true)
                         .addNewTargetByCssSelector("#sample-scroll-table tbody").scrollTarget(true)
                         .addNewTargetByName("sample-scroll-iframe").scrollTarget(true)
                                                         .build();

// 3. 比較対象を使用して検証を実行します。
assertionView.assertView(arg);

}
}

結果画像は以下のようになります。

次のステップ ⇒ 07.比較対象から除外する

参照

ライブラリ仕様 - hifive