Enrich Your ReportNG Report with Screenshots and more…

          In the projects where we have a vast number of regression tests it became obvious to our QA team that a good reporting tool for reporting the execution results was of great essence. In the search, a simple HTML plugin for TestNG, called as “ReportNG” was the obvious way to go just because of its simplicity and easiness in integration with TestNG which is our testing framework. ReportNG provided us with a html report presenting each @Test with a pass / fail state. Although many projects are already using this option, here I am going to discuss about enrichment of your ReportNG Reports with some advanced features.

In this journey, we will first discuss about adding screenshot to the ReportNG Report.

Although ReportNG presented an excellent solution to our reporting problems it became apparent that for debugging purposes as well as for defect evidence purposes an extension to include screenshots was needed. These screenshots should be attached to every @Test annotation which fails along with the assertion failure.

Adding Screenshot is a three step procedure:

1. Disable the Default TestNG Listeners:
     For disabling the TestNG Listeners Go to Project –> Right click on the project in which we need to add ReportNG with screenshot. Select “Properties” from the menu displayed. In the displayed window, search for “TestNG” option on the left side tree menu. Up on clicking on the “TestNG” option, you will see check box with the text “Disable default listeners”. Check that check box and click on “Apply”.
    Well done! Now you disabled your default TestNG Listeners. Our next task is assigning the proper listener in the TestNG xml.

2. Adding ReportNG Listeners to TestNG XML:
Add the following lines of XML tags for your existing TestNG XML under “<suite” tag.

<listeners>
< listener class-name=”org.uncommons.reportng.HTMLReporter”/>
<listener class-name=”org.uncommons.reportng.JUnitXMLReporter”/>
< /listeners>

Good work! You are almost there. The next step is to write a code for appending screenshot to your existing ReportNG Report.

3. Write code for appending Screenshot:
Add the following code for test class for doing this task. Let’s discuss about the code now. The first method with the annotation “@AfterMethod” will run after every method . In this method we are calling the “catchExceptions” method which takes care of taking screenshot and appending it to your default ReportNG reports.

@AfterMethod(alwaysRun = true)

public void afterMethod(ITestResult result) throws Exception {

if (!result.isSuccess())

catchExceptions(result);

// Quit environment.

Thread.sleep(1000);

driver.quit();

}

public void catchExceptions(ITestResult result) {
BufferedWriter writer = null;
String methodName = result.getName();
System.setProperty(“org.uncommons.reportng.escape-output”, “false”);
if (!result.isSuccess()) {
try {
String failureImageFileName = “sample1″;
String failureImageFileName1;
scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File(failureImageFileName));
String userDirector = System.getProperty(“user.dir”) + “/”;
String s1 = “<table><tr><td><font style=\”text-decoration: underline;\” size=\”3\” face=\”Comic sans MS\” color=\”green\”><b>Screenshot</b></font></td></tr> “;
Reporter.log(s1);
Reporter.log(“<tr><td><a href=\””+ userDirector + failureImageFileName +”\”><img src=\”file:///” + userDirector+ failureImageFileName + “\” alt=\”\””+ “height=’120′ width=’120′/></td></tr> “);
Reporter.setCurrentTestResult(null);
} catch (IOException e1) {
e1.printStackTrace();
}
}
}

 

Fine!! Now you have successfully added the screenshot to your ReportNG Report.

Let’s discuss about another advanced feature “Webpage”. Webpage is nothing but the source code of the corresponding page. While working with selenium, the most probable and simple issues are object locations. As we have page source appended with the report, it is easy for identifying such issues. It also minimizes the debugging time, because while debugging the test case, we don’t want to go to that particular page. WebDriver itself is providing us an option to have that page source.

“driver.getPageSource()” will fetch the page source. Now the following will be used to add such page source to our Report. Also see the Screenshots of the ReportNG report after adding these features.

String s2 = “<tr style=\”height:20px\”><td></td></tr>”;
Reporter.log(s2);
String s3 = “<tr><td><font style=\”text-decoration: underline;\” size=\”3\” face=\”Comic sans MS\” color=\”green\”><b>Webpage</b></font></td></tr> “;
Reporter.log(s3);
failureImageFileName1 = userDirector + “sample2″;
scrFile = new File(failureImageFileName1);
writer = new BufferedWriter(new FileWriter(scrFile));
writer.write(driver.getPageSource());
writer.close();
Reporter.log(“<tr><td><a href=\””+ scrFile +”\”><img src=\”file:///” + scrFile + “\” alt=\”\””+ “height=’120′ width=’120′/></td></tr></table> “+”<br />”);

Sample ReportNG Report: (Click for zoom)