10.Pitalium Explorer

Last modified by ishikawa on 2016/04/07, 22:00

We Pitalium Explorer helps checking test results on a browser.
This chapter describes how to explore test results with Pitalium Explorer.


This tutorial expects that the tools below have been set up.

  • Tomcat 7

Pitalium Explorer

  1. Pitalium Explorer is included with Pitalium
     Download Pitalium 
     unzip and go to pitalium_x.x.x/pitalium-explorer-x.xx.x/
  2. Copy pitalium-explorer.war to  ${TOMCAT_HOME}/webapps/
  3. Run ${TOMCAT_HOME}/bin/startup.bat and start Tomcat server.
  4. Access http://localhost:8080/pitalium-explorer/list.html
    If you see result list page Pitalium Explorer is set up correctly.

Importing test result data

  1. Prepare test result file of Pitalium.
    All the file under results folder required. The folder structure as follows.
      results(default is pitalium/results)
      ├ [testResultID](default is timestamp)
      │└ [testMethodName]
      │ ├ [screenshotId].png
      │ └ [screenshotId].json
      └ currentExpectedIds.json
  2. Open ${TOMCAT_HOME}/webapps/pitalium-explorer/WEB-INF/classes/persisterConfig.json in any text editor.
  3. Change the value of "resultDirectory" property to the path of "results" folder above. [testResultID] folders should bee directly under the "results" folder.
    e.g. the value is like C:/workspace/mytest/results
  4. Restart Tomcat.
    Run ${TOMCAT_HOME}/bin/shutdown.bat then
  5. Access http://localhost:8080/pitalium-explorer/list.html
    If you show the result list of specified results folder, ready.

Exploring Results

Result List Page(list.html)


Result List

The test results are listed.

Test Result Summary


Each column of the list has items as below.

【1】timestamp(as test ID)
【2】The number of Passed/Total
【3】Bar representation of 【2】
【4】Result mark
        # Result mark...Checked: All passed, Cross: Some failed, No mark: the test has been run on SET_EXPECTED_MODE

【5】Change page size form

  • You can change the number of summary per page.

Test Comparison Result of Each Screenshot


Click summary link to see the result list of the test.
The contents are below.

【1】 Test class name
【2】Test method name
【3】Screenshot ID
【4】OS that the test run on
【6】The version of browser
【7】Result mark

Click any item of the list to open the image comparison page.
(See <Image Comparison Page>)



【1】Click "Open search" button to show search form.
You can search results by test method name or screenshot ID.

Image Comparison Page(diff.html)


Click any item of the result list to open the image comparison page.

Result Tree Pane

【1】Tests are shown in tree structure of the selected browser.

Contents are below.
 Test class
  └ Test method
    └ Screenshot ID Icon
 # Icon… Blue: Expected image, Red: Actual result image.
         faded icon tells the image doesn't exist in the test.

Comparison Detail Pane

Result Information

Shows detailed information of image comparison as below.
【2】Comparison Result:Comparison result of selected images. Circle: succeed, Cross: there is difference, Hyphen: Only one of them exists.
【3】Actual:Actual image.
【4】Expected:Expected image.


【5】Pitalium can specify multiple targets to take screenshot.

You can choose which target to see by the selectbox under the result information.

Image Diff Vew

You can see difference between the expected image and the actual image in five view for comparison.
Different areas are shown as red rectangle.

Each view is like below.
【6】Quick flipping:Click the tab "Expected" and "Actual" to flip two images.
【7】2-up:Show two images side by side.
【8】Swipe:You can slide the border to change images. The left side of the border is actual image, and the right is expected.
【9】Onion skin:You can fade the images. Swipe the slider right to show ACTUAL, and the left to show EXPECTED.
【10】Edge overlapping:This view extracts the Edge of two images and show them layered. Blue edges are EXPECTED ones. Red edges are ACTUAL ones. Black edges are the ones both have.

Comparing Any Image

【11】Click "Select Execution" button to show the popup for choosing results to compare.

1) Choose a result and click "Actual" button to set the image as ACTUAL.
1) Choose another result and click "Expected" button to set the image as EXPECTED.
3) Click "Select" button
4) The Explorer compares two images specified in 1) and 2).

Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.