05.Taking a Screenshot of a Specific DOM Element
- 01.About Pitalium
- 02.Environment Setup
- 03.Writing Test Code
- 04.Running a Test
- 05.Taking a Screenshot of a Specific DOM Element
- 06.Taking a Screenshot of a DOM Element with Scroll
- 07.Excluding Elements from Comparison Targets
- 08.Redefining of Correct Images
- 09.Running a Test in Mobile Devices
- 10.Pitalium Explorer
Pitalium enables you not only to test a content of whole page content, but to test that of a specified DOM element. For example, you test a header, footer and sidebar of a page.
This chapter shows how to compare partially using a DOM selector.
About partial comparison
Selector type
The selectors to specify DOM elements are as follows:
- ID
- CLASS_NAME
- CSS_SELECTOR
- NAME
- LINK_TEXT
- PARTIAL_LINK
- TAG_NAME
- XPATH
These are the same as those of Selenium API By . See here about the detail of a selector.
Output result
When not specifying an elenemt, you get a screenshot of a whole page. When specifying some elements, you get screenshot of only these elements .
Note that you also get a screenshot of a whole page.
How to compare a part of a page
Test a content of a DOM element specified by ID
The following sample is a test code to compare 'What is hifive' part of the top page of the hifive site.
import com.htmlhifive.pitalium.core.PtlTestBase;
import com.htmlhifive.pitalium.core.model.ScreenshotArgument;
import com.htmlhifive.pitalium.core.model.SelectorType;
public class SampleTest extends PtlTestBase {
@Test
public void testCompareTarget_ID() throws Exception {
// 1. open the top page of the hifive site
driver.get("https://www.htmlhifive.com/");
// 2. Specify ID=about as a test target
ScreenshotArgument arg = ScreenshotArgument.builder("TopPageAbout")
.addNewTarget(SelectorType.ID, "about")
.build();
// 3. Take a screenshot and compare with an expected one
assertionView.assertView(arg);
}
}
To specify some DOM element, use the addNewTarget method of ScreenshotArgument builder.
The section「What is hifive」is assign id="about". Thus this sample specify it by selector type = ID, value = about.
Test DOM elements specified by a CSS selector
The following sample is to test 'What is hifive' in the top page of the hifive site.
import com.htmlhifive.pitalium.core.PtlTestBase;
import com.htmlhifive.pitalium.core.model.ScreenshotArgument;
import com.htmlhifive.pitalium.core.model.SelectorType;
public class SampleTest extends PtlTestBase {
@Test
public void testCompareTarget_cssSelector() throws Exception {
// 1. open the hifive top page.
driver.get("https://www.htmlhifive.com/");
// 2. Get contents of 'What is hifive' specified by a CSS selector
ScreenshotArgument arg = ScreenshotArgument.builder("TopPageAboutContents")
.addNewTarget(SelectorType.CSS_SELECTOR, "#about > div")
.build();
// 3. Take screenshots and compare them with those of expected
assertionView.assertView(arg);
}
}
In this example, there are three elements specified by this css selector. Thus we have each screenshot as follow:
- testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome.png
(a screenshot of the whole page) - testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome_CSS_SELECTOR_#about - div_[0].png
(a screenshot of "次世代Web標準を活用した開発プラットフォーム") - testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome_CSS_SELECTOR_#about - div_[1].png
(a screenshot of "高品質で大規模なjs開発を可能にする") - testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome_CSS_SELECTOR_#about - div_[2].png
(a screenshot of "マルチデバイス時代を見据えた開発を支援")
Note that AssertionError will arise if there is no element specified these css selectors
Run a Test
Check whether the screenshots of the specified elements are saved or not in the above samples.
Next Step ⇒ 06.Taking a Screenshot of a DOM Element with Scroll