05.DOM要素のスクリーンショット
Pitaliumを使うことで、ページ全体だけではなく、ページの一部（DOM要素）をテストの対象とすることができます。例えば、ページ上のヘッダー、フッターやサイドバーのみのテストが可能です。ここではDOMセレクタを使用して部分比較を行う方法を示します。
部分比較について
セレクタ種別
DOMを指定するためのセレクタは次の8種類です。これらのセレクタを使用することで特定のDOMを指定します。
- ID
- CLASS_NAME
- CSS_SELECTOR
- NAME
- LINK_TEXT
- PARTIAL_LINK
- TAG_NAME
- XPATH
これらのセレクタは Selenium API の By と同義です。セレクタについての詳細な説明はこちらをご覧下さい。
出力結果
要素を指定せずにテストを実行した場合、取得されるスクリーンショットは画面全体を写したものでした。特定のDOMを指定したテストを実行した場合は 指定したDOMのみを切り出した画像 が保存されます。
※画面全体のスクリーンショットも保存されます。
部分比較の方法
IDを指定してDOMを比較する
以下のサンプルは、hifiveトップページの「hifiveとは」セクションのみを比較するテストコードです。
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 testCompareTarget_ID() throws Exception {
// 1. hifiveサイトのトップページを開きます。
driver.get("https://www.htmlhifive.com/");
// 2. ID: about の比較対象を作成します。
ScreenshotArgument arg = ScreenshotArgument.builder("TopPageAbout")
.addNewTargetById("about")
.build();
// 3. 比較対象を使用して検証を実行します。
assertionView.assertView(arg);
}
}
特定のDOMをターゲットに指定するには、ScreenshotArgumentおよびScreenshotArgumentBuilderを使用すると便利です。
「hifiveとは」セクションは最上位のDOMに id="about" が指定されています。そのため、このサンプルでは IDが"about" の要素をターゲットに指定しています。
ScreenshotArgument.builder("TopPageAbout")
まず、スクリーンショットIDを引数に指定し、ビルダーを生成します。
.addNewTargetById("about")
次に、撮影するターゲットを指定します。IDで指定する場合は、addNewTargetById() を使用します。
.build()
最後に、ビルダーに指定した条件でスクリーンショットを撮影するパラメーターを持つScreenshotArgumentオブジェクトを生成します。
assertionView.assertView(arg);
このように assertView メソッドに渡すパラメータを指定することで、特定のDOMのみの比較テストを実行できます。
ScreenshotArgumentのさらに詳しい使い方は、こちら をご覧ください。
CSSセレクタを指定してDOMを比較する
以下のサンプルは、hifiveトップページ「hifiveとは」の各コンテンツそれぞれをテストの対象とします。
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 testCompareTarget_cssSelector() throws Exception {
// 1. hifiveサイトのトップページを開きます。
driver.get("https://www.htmlhifive.com/");
// 2. "#about > div" 比較対象を作成します。
ScreenshotArgument arg = ScreenshotArgument.builder("TopPageAboutContents")
.addNewTargetByCssSelector("#about > div")
.build();
// 3. 比較対象を使用して検証を実行します。
assertionView.assertView(arg);
}
}
このCSSセレクタで指定されるDOMは3つ存在し、以下の様にそれぞれに対応するスクリーンショットが撮影されます。
- testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome.png
（全体のスクリーンショット） - testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome_CSS_SELECTOR_#about - div_[0].png
（「次世代Web標準を活用した開発プラットフォーム」のスクリーンショット） - testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome_CSS_SELECTOR_#about - div_[1].png
（「高品質で大規模なjs開発を可能にする」のスクリーンショット） - testCompareTarget_cssSelector_TopPageAboutContents_WINDOWS_chrome_CSS_SELECTOR_#about - div_[2].png
（「マルチデバイス時代を見据えた開発を支援」のスクリーンショット）
※CSSセレクタで指定されるDOMが存在しない場合、AssertionErrorとなります。
動作確認
上記のサンプル2つを実行します。
それぞれのCompareTargetで指定したDOMのスクリーンショットが保存されていることを確認します。
次のステップ ⇒ 06.スクロールのあるDOM要素のスクリーンショット