Tutorial（Pitalium: hifive regression test library） » 06.Taking a Screenshot of a DOM Element with Scroll

06.Taking a Screenshot of a DOM Element with Scroll

Last modified by kashi on 2017/04/13, 17:41

Pitalium

Pitalium can take screenshot of a scrolling DOM Element including hidden part of it (requries v1.1.0 or above).
This chapter shows how to do this.

How to Specify Options
Sample
- When set moveTarget=false
- When set moveTarget=true
See Also

How to Specify Options

Specify arguments of Constructor for CompareTarget.

The API is below.

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

Property	Type	Descriptioin
compareArea	ScreenArea	A DOM element or area to compare.
excludes	ScreenArea[]	An array of DOM element or area to exclude from compareArea.
moveTarget	boolean	Whether to move target at (0, 0) when taking screenshot.
scrollTarget	boolean	Whether to expand target if it has scroll.

※ See this article to know why/when you should specify moveTarget ⇒ Getting large amount of difference - hifive

If you set scrollTarget true, Pitalium takes screenshot of a DOM element including a part hidden by scroll. The default value is false.

Sample

The sample page is below.
Scrolling DOM element sample page - hifive

When set moveTarget=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. Open the test page.
driver.get("https://www.htmlhifive.com/conts/web/view/pitalium-samples/partial-scroll");

// 2. Construct CompareTarget specifying moveTarget=false.
       ScreenshotArgument arg = ScreenshotArgument.builder("ScrollTestPage")
                                                        .addNewTargetById("sample-scroll-div").scrollTarget(false).moveTarget(false)
                                                        .addNewTargetById("sample-scroll-textarea").scrollTarget(false).moveTarget(false)
                                                        .addNewTargetByCssSelector("#sample-scroll-table tbody").scrollTarget(false).moveTarget(false)
                                                        .addNewTargetByName("sample-scroll-iframe").scrollTarget(false).moveTarget(false)
                                                        .build();

// 3. Assert the targets.
assertionView.assertView(arg);

}
}

The images taken by this sample are as below.

When set moveTarget=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. Open the test page.
driver.get("https://www.htmlhifive.com/conts/web/view/pitalium-samples/partial-scroll");

// 2. Construct CompareTarget specifying moveTarget=true.
       ScreenshotArgument arg = ScreenshotArgument.builder("ScrollTestPage")
                                                        .addNewTargetById("sample-scroll-div").scrollTarget(true).moveTarget(true)
                                                        .addNewTargetById("sample-scroll-textarea").scrollTarget(true).moveTarget(true)
                                                        .addNewTargetByCssSelector("#sample-scroll-table tbody").scrollTarget(true).moveTarget(true)
                                                        .addNewTargetByName("sample-scroll-iframe").scrollTarget(true).moveTarget(true)
                                                        .build();

// 3. Assert the targets.
assertionView.assertView(arg);

}
}