Pitaliumを使ってスクリーンショットベースのユニットテストを書こう（実用編）

Pitaliumを使うとSeleniumのテストが画面の表示結果ベースでの確認になるので、DOMやテキストのように一つ一つ指定して確認する必要がありません。さらにスクリーンショットを保存しますので、画面のデザイン崩れについても確認ができます。

今回はそんなPitaliumをさらに活用できるテクニックについて紹介します。

IDを指定してDOM比較

これは画面の一部について確認を行いたい時に使えるコードになります。ヘッダー、フッターは変化せず、メインコンテンツだけを比較したいといった使い方が考えられます。

コードは例えば以下のようになります。

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 testCompareTarget_ID() throws Exception {
        // 1. hifiveサイトのトップページを開きます。
        driver.get("https://www.htmlhifive.com/");

        // 2. ID: about の比較対象を作成します。
        List<CompareTarget> targets = new ArrayList<CompareTarget>();
        targets.add(new CompareTarget(ScreenArea.of(SelectorType.ID, "about")));

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

CSSセレクタを使ってDOMを指定

さらにCSSセレクタによるDOMの指定もできます。この場合、コンテンツが複数あるケースも考えられます。その時にはスクリーンショットも複数に分かれて比較されます。サンプルコードは次のようになります。

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 testCompareTarget_cssSelector() throws Exception {
        // 1. hifiveサイトのトップページを開きます。
        driver.get("https://www.htmlhifive.com/");

        // 2. "#about > div" 比較対象を作成します。
        List<CompareTarget> targets = new ArrayList<CompareTarget>();
        targets.add(new CompareTarget(ScreenArea.of(SelectorType.CSS_SELECTOR, "#about > div")));

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

比較から除外する

例えばバナーであったり、ログイン名、Facebookのいいねなど状態によって表示内容が変わってしまう場合があります。そうした時にPitaliumは二つの方法を用意しています。

要素を除外

指定したID、CSSセレクタを使って除外設定を行います。

import java.util.Arrays;
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 いいね」ウィジェットを除外します。
        ScreenArea[] excludes = {ScreenArea.of(SelectorType.ID, "fb_share")};
        CompareTarget target = new CompareTarget(ScreenArea.of(SelectorType.TAG_NAME, "body"), excludes, true);
        List<CompareTarget> targets = Arrays.asList(target);

        // 3. スクリーンショットを撮影します（比較を実行します）
        assertionView.assertView("TopPageExcludeFBLike", targets);
    }
}

このように除外設定を行うと、専用の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"
          }
        }
      }
    ],
    ...
  }
]

スクリーンショット自体は特に加工を行わず、このJSONファイルを使って指定部分を比較対象外にするという仕組みになっています。

要素を非表示にする

非表示にするのは例えばポップアップのフローティングであったり、チュートリアルのツアーなどスクリーンショットで比較する際に邪魔になってしまう要素を除外する指定になります。

この場合は上記の除外とは異なり、予め要素を非表示にした上でスクリーンショットを撮影します。

import java.util.Arrays;
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 PtlTestBase {

    @Test
    public void testHidden() throws Exception {
        // 1. hifiveサイトのトップページを開きます。
        driver.get("https://www.htmlhifive.com/");

        // 2. 画面全体のスクリーンショットを撮影します。
        //    ただし「トップへ戻る」を非表示とします。
        List<DomSelector> hiddenSelectors = Arrays.asList(new DomSelector(SelectorType.CLASS_NAME, "gototop"));

        // 3. スクリーンショットを撮影します（比較を実行します）
        assertionView.assertView("TopPageHidden", null, hiddenSelectors);
    }

}

テストの再定義

運用を重ねていく内に、テストが失敗する時がきます。この時に行うべき対応としては2種類あります。

1. 見た目が変化しただけでテストケースに影響がない場合
2. 表示ロジックが変わったなど、テストケースが影響を受ける場合

それぞれ対応が異なってきます。

テストケースに影響がない場合

一旦RUN_TESTモードで実行した後、差分結果が問題ないか確認します。そして SET_EXPECTED モードで実行すると期待値となるスクリーンショットを更新してくれます。

テストケースに影響がある場合

テストケースの修正後、TAKE_SCREENSHOTモードで修正したテストコードや取得されるスクリーンショットが正しいことを確認してください。その後、SET_EXPECTED モードで実行すると期待値となるスクリーンショットを更新してくれます。

Pitaliumを使うとWebアプリケーションのテスト時における検証の面倒さから解放され、スクリーンショット単位での確認になります。さらにIEやChromeなど多くのブラウザにおけるデザイン崩れの発生が素早く行えるようになります。ぜひPitaliumを使って快適なテスト環境を構築してください！

Pitalium(hifiveリグレッションテストライブラリ) – hifive