10.Pitalium Explorer
- 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
We Pitalium Explorer helps checking test results on a browser.
This chapter describes how to explore test results with Pitalium Explorer.
Prerequisites
This tutorial expects that the tools below have been set up.
- Tomcat 7
Pitalium Explorer
- Pitalium Explorer is included with Pitalium
Download Pitalium
unzip pitalium.zip and go to pitalium_x.x.x/pitalium-explorer-x.xx.x/ - Copy pitalium-explorer.war to ${TOMCAT_HOME}/webapps/
- Run ${TOMCAT_HOME}/bin/startup.bat and start Tomcat server.
- Access http://localhost:8080/pitalium-explorer/list.html
If you see result list page Pitalium Explorer is set up correctly.
Importing test result data
- 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 - Open ${TOMCAT_HOME}/webapps/pitalium-explorer/WEB-INF/classes/persisterConfig.json in any text editor.
- 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 - Restart Tomcat.
Run ${TOMCAT_HOME}/bin/shutdown.bat then
${TOMCAT_HOME}/bin/startup.bat - 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）
http://localhost:8080/pitalium-explorer/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
【5】Browser
【6】The version of browser
【7】Result mark
Click any item of the list to open the image comparison page.
（See <Image Comparison Page>）
Search
【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.
Targets
【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).