Tutorial（Pitalium: hifive regression test library） » 07.Excluding Elements from Comparison Targets

07.Excluding Elements from Comparison Targets

Last modified by kashi on 2016/03/30, 14:21

Pitalium

In a web page, there are some parts which change their contents sometimes, like a login user name or the Facebook plugin. It is important to test such contents, but such changes results differences in Pitalium and make tests failure.

To solve this problem, you can exclude specified DOM elements from testing targets in Pitalium.

Exclude Elements
Hide Elements
- Hide elements by a class
See Alsp

Exclude Elements

Exclude Elements Specified by an ID

The following sample is to exclude the 'Share Button' at the top of the hifive page when taking a screenshot.

import org.junit.Test;

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 testExclude() throws Exception {
       // 1. open the top page of the hifive site
       driver.get("https://www.htmlhifive.com/");

       // 2. configure to take a screenshot of the whole page
       //    excluding the 'Share Button'
       ScreenshotArgument arg = ScreenshotArgument.builder("TopPageExcludeFBLike")
                                                    .addNewTarget().addExclude(SelectorType.ID, "fb_share")
                                               .build();

       // 3. take screenshots and compare them with expected ones
       assertionView.assertView(arg);
   }

}

To exclude a DOM element, use the addExclude(selectorType, selecor) of ScreenshotArgumentBuilder after calling the addNewTarget method.

Exclude Elements Specified by a CSS class

Then we shows how to exclude multiple DOM elements specified by a CSS class not by an ID. If multiple elements are matched by a CSS class selector, they are excluded from comparison targets in Pitalium. The following example is to exclude the contents of all the sliders. If a slider changed when taking screenshots, you can run a test successfully without differences arise.

import org.junit.Test;

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 testExclude() throws Exception {
       // 1. open the top page of the hifive site
       driver.get("https://www.htmlhifive.com/");

       // 2. configure to take a screenshot of the whole page
       //    excluding the contents of the all sliders
       ScreenshotArgument arg = ScreenshotArgument.builder("TopPageExcludeSliders")
                                                    .addNewTarget().addExclude(SelectorType.CLASS_NAME, "item")
                                               .build();

       // 3. take screenshots and compare them with expected ones
       assertionView.assertView(arg);
   }

}

Output Results when Excluding Elements

Output screenshots when excluding elements are the same as those when not. The information of excluding elements are saved as a json file as follows, and it is used when comparing images.

[
  {
   "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"
          }
        }
      }
    ],
   ...
  }
]

Hide Elements

The above examples are for elements whose contents are changed but whose position are fixed.
In a web page, there are also elements such as those whose position is changed or which become visible by scrolling. In the top page of the hifive site, 'Go to Top' becomes visible by scrolling. In comparison, these elements sometimes overlap target ones, which results differences of screenshots.

To solve this, you can hide these elements, that is, make invisible in Pitalium.

Hide elements by a class

When you compare screenshot of the hifive top page, you see a difference of the 'Go to Top' part. In the following example, hide the part and get rid of the difference.

import org.junit.Test;

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 testHidden() throws Exception {
        // 1. open the top page of the hifive site
       driver.get("https://www.htmlhifive.com/");

        List<DomSelector> hiddenSelectors = Arrays.asList(new DomSelector(SelectorType.CLASS_NAME, "gototop"));
       // 2. configure to take a screenshot of the whole page
       //    hiding the 'Go to top' element
       ScreenshotArgument arg = ScreenshotArgument.builder("TopPageHidden")
                                                    .addNewTarget().addHiddenElementSelectors(SelectorType.CLASS_NAME, "gototop")
                                               .build();
       // 3. take screenshots and compare them with expected ones
       assertionView.assertView(arg );
   }

}

To hide DOM elements, use the addHiddenElementSelectors(selectorType, selecor) of ScreenshotArgumentBuilder after calling the addNewTarget method.

You get the screenshot with the specified DOM element being invisible.

Next Step ⇒ 08.Redefinition of Correct Images

See Alsp

ライブラリ仕様 - hifive