Adding screenshot to TestNG - html

Question

I am running some tests using testNG and Selenium. The test data comes from a CSV file. In each step it is possible to take a screenshot of the page. I am trying to add this screenshot to the testNG HTML report (emailable report).
I am using this to add the img element;
Reporter.log("<img src=\"file:///" + pathToScreen + "\" alt=\"\"/><br />");
Now this works partially, because it is in fact adding this to the report as you can see in the screenshot below. But the HTML code does not seem to work.
Is the path to the image file wrong? I think so, but I am not sure how I can fix this.
UPDATE:
This is from the source code of the HTML report. Apparently its not even parsing it as HTML???
<div class="messages"><img src="file://C:\Users\myUSername\Desktop/screenshots/step 1_enter username_baseline.png" alt=""/></img></div>

Answer 1

To have the screenshot embedded in the index.html report I used relative paths as:
System.setProperty("org.uncommons.reportng.escape-output", "false");
Reporter.log(
"<a title= \"title\" href=\"../path/from/target/" + fileName + "\">" +
"<img width=\"418\" height=\"240\" alt=\"alternativeName\" title=\"title\" src=\"../surefire-reports/html/screenShots/"+fileName+"\">
</a>");
In this case, the Screenshot is displayed in the OutputReport not in the main index page with the stacktrace of the fails which is a bit anoying. But at least images and links are working.
I edit myself to add the complete solution, setting the property "org.uncommons.reportng.escape-output" as false we are passing the html code instead of the text.
I recommend to use ReportNG where the screenshots are attached correctly to the test failure with the complete stack trace:

Answer 2

Ok apparantly I was looking at the wrong file. I was looking at the emailable-report.html while reporter.log sends everything to index.html. In the index.html file everything is working fine using the code in my first post.

Answer 3

if you want to save your image both as file(jpg/png etc ..) and base64 format try below complete code .
Base64 format is recommended for emailable reports .
File src = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
//Saving image to current working directory , you can ignore this step if dont want to save file
FileUtils.copyFile(src, new File("./demotest.png"));
String fileName = System.getProperty("user.dir") + "/demotest.png";
Reporter.setEscapeHtml(false); //This need to be set as false
byte[] fileContent = FileUtils.readFileToByteArray(new File(fileName));
String encodedString = Base64.getEncoder().encodeToString(fileContent);
String path = "<img src=\"data:image/png;base64, " + encodedString + "\" width=\"300\" height=\"350\" />";
Reporter.log(path);
or if you want only Base64 file format then ..
String src = ((TakesScreenshot)driver).getScreenshotAs(OutputType.BASE64);
String path = "<img src=\"data:image/png;base64, " + src + "\" width=\"300\" height=\"350\" />";
Reporter.log(path);
See Output: