How do I email an HTML report (as an attachment) with images embedded?

Question

I am creating a report with ExtentReports to be emailed out to team members outside of the domain. I use a screenshot method (below) to save screenshots of test failures. They are stored in a child folder to the ExtentReports HTML report.

I attach the report to an email, and in it, the images display fine for team members on the domain with folder permission. But I am at a loss for how to allow people outside of that folder's permissions, to see the images embedded in the report. This is the HTML for the image, directly referencing that file.

<img class="report-img" data-featherlight="file:///\\domain.local\files\QA\Projects\AutomationReports\ExtentScreens\1486487870116.jpg" src="file:///\\domain.local\files\QA\Projects\AutomationReports\ExtentScreens\1486487870116.jpg">

Here is my screenshot method.

public static String CaptureScreen(WebDriver driver) {
    String ImagesPath = "\\\\domain.local\\files\\QA\\Projects\\AutomationReports\\ExtentScreens\\"
            + new Date().getTime();

    TakesScreenshot oScn = (TakesScreenshot) driver;
    File oScnShot = oScn.getScreenshotAs(OutputType.FILE);
    File oDest = new File(ImagesPath + ".jpg");

    // System.out.println(ImagesPath);

    try {
        FileUtils.copyFile(oScnShot, oDest);
    } catch (IOException e) {
        System.out.println(e.getMessage());
    }
    return ImagesPath + ".jpg";
}

I have 2 unrelated ideas on how to fix this. But I need some help getting started with either of them. I'm open to other suggestions.

1. Embed images directly into the HTML report or somehow send a folder containing screenshots with the HTML report. However, the HTML will still reference my original location and the images will be broken.

2. Share the folder containing images with Everyone, Guest, and Anonymous User, so people outside of the domain can open HTML that references this location. I don't know how to set these permissions, and I'm not even sure that doing so will allow an external user to view HTML referencing the location.

Answer 1

Please try with base64 encoding it will definitely work. Also, please check your browser support.

Try this:

<img src="data:image/jpeg;base64,/9j/4AAQxxxxxxxx...." />

Answer 2

Depending on what browsers you need to support , you could embed your images in base64. like this :

<img src="data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->" />

Here is a tool to encode your images

Answer 3

您可以将 base64 编码的图像直接嵌入到 HTML 文档中。

<img src="data:image/jpeg;base64,/9j/4AAQxxxxxxxx...." />

Answer 4

You can create a multipart/report message with the images included as additional body parts in the message. The JavaMail FAQ includes this sample code:

    Multipart multipart = new MimeMultipart("related");

    MimeBodyPart htmlPart = new MimeBodyPart();
    // messageBody contains html that references image
    // using something like <img src="cid:XXX"> where
    // "XXX" is an identifier that you make up to refer
    // to the image
    htmlPart.setText(messageBody, "utf-8", "html");
    multipart.addBodyPart(htmlPart);

    MimeBodyPart imgPart = new MimeBodyPart();
    // imageFile is the file containing the image
    imgPart.attachFile(imageFile);
    // or, if the image is in a byte array in memory, use
    // imgPart.setDataHandler(new DataHandler(
    //      new ByteArrayDataSource(bytes, "image/whatever")));

    // "XXX" below matches "XXX" above in html code
    imgPart.setContentID("<XXX>");
    multipart.addBodyPart(imgPart);

    message.setContent(multipart);

Answer 5

We should have a class file as below

public class GetScreenShort {

public static String capture(WebDriver driver,String screenShotName) throws IOException { TakesScreenshot ts = (TakesScreenshot)driver;

 String dest = ts.getScreenshotAs(OutputType.BASE64); return "data:image/jpg;base64, " + dest ; }

}

The same class has to be called as below

String screenShotPath = GetScreenShort.capture(webdriver, "screenShotName");