ExtentReports - screenshot not in the report - broken image

Question

I'm trying to add a screenshot to my ExtentReport HTML file, but for some reason, the image is not there even though it DOES exist and the console shows that it's looking at the correct place (href is correct).

This is the latest trial code:

Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
String destination = getScreenshotPath();
ImageIO.write(screenshot.getImage(), "IMG", new File(destination));
test.fail("Details: " + test.addScreenCaptureFromPath(destination));

The screenshot gets saved in the destination. When I try the debugging mode, or look at the report, it's printed as:

Details: com.aventstack.extentreports.ExtentTest@62041567 and there's a broken image under it:

Laval

Answer 1

As suggested - the absolute path could be a solution, but I didn't want to go that way.

I've figured out that a solution is to store the images in the same directory where the report gets generated, give the image name to .addScreenCaptureFromPath(screenshotName.PNG) and it works perfectly.

Laval

This does not solve the issue, at least not in my case. – Boniface

What if you run several tests in the same suite and it would be multiple failures with screenshot for each failure? – Avert

This worked for me. Please note that it is not required to keep the report and screenshot in the same folder. – Argyrol

Answer 2

I used the absolute path

Note: inspects the broken image from the browser to validate the absolute path of the image

Take ScreenShot:

  public static String TakesScreenshot(IWebDriver driver, string FileName)
    {

        string pathProject = AppDomain.CurrentDomain.BaseDirectory;
        string pathScreen = pathProject.Replace("\\bin\\Debug", "");
        string path = pathScreen + "project/Test-output/Images/";

        StringBuilder TimeAndDate = new StringBuilder(DateTime.Now.ToString());
        TimeAndDate.Replace("/", "_");
        TimeAndDate.Replace(":", "_");
        TimeAndDate.Replace(" ", "_");

        string imageName = FileName + TimeAndDate.ToString();

        ((ITakesScreenshot)driver).GetScreenshot().SaveAsFile(path + "_" + imageName + "." + System.Drawing.Imaging.ImageFormat.Jpeg);

        return path + "_" + imageName + "." + "jpeg";
    }

Attach image to the report with path of the preview method: In the specific step:

ExtentTest.Fail("message", MediaEntityBuilder.CreateScreenCaptureFromPath(TakeScreenShot.TakesScreenshot(driver, "Fatal")).Build());

With the method "TakesScreenshot" Take the screenshot

Version ExtentReport: 3, C#, NUnit 3

USING JAVA:

        <dependency>
        <groupId>com.relevantcodes</groupId>
        <artifactId>extentreports</artifactId>
        <version>2.41.2</version>
        </dependency>

Is:

 ExtentTestManager.getTest().log(LogStatus.ERROR, ExtentTestManager.getTest().addScreenCapture("//ABOLUTE/PATH/IMAGE.PNG"));

regards.

Odontograph

Answer 3

In order to get screenshot in the extent report just add a extra dot in the extent report screenshot path. Refer code below:

test.log(Status.INFO, "FAQs button clicked",
                        MediaEntityBuilder.createScreenCaptureFromPath("." + screenshot()).build());

Hope this helps!

Embark

Answer 4

You can add screenshot for absolute path as below:

File src = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

//for file copy, absolute path starts from your project directory

FileUtils.copyFile(src, new File("../resources/reports/screenshots/screen2.png"));

String img = logger.addScreenCapture("./screenshots/screen2.png");

logger.log(LogStatus.PASS, "Title verified...", img);

Please note that here in addScreenCapture() method path started from screenshots folder and not resources as in copyFile() method. Its because ExtentReports is initialized as :

ExtentReports report = new ExtentReports("../resources/reports/extentreports_v2.html", true);

so for extentreports_v2.html to find screenshot's absolute path, it should start from "reports" directory

Riotous

Your solution works for me like a charm. Thanks! – Irvinirvine

Answer 5

This is will work for you as its works me as well.

public void afterScenario(Scenario scenario) throws IOException {
        if (scenario.isFailed()) {
            String screenshotName = scenario.getName().replaceAll(" ", "_");
            //This takes a screenshot from the driver at save it to the specified location
            File sourcePath = ((TakesScreenshot) testContext.getWebDriverManager().getDriver()).getScreenshotAs(OutputType.FILE);

            //Building up the destination path for the screenshot to save
            //Also make sure to create a folder 'screenshots' with in the cucumber-report folder
            File destinationPath = new File("./src/test/resources/"+screenshotName + ".png");

            //Copy taken screenshot from source location to destination location
            Files.copy(sourcePath, destinationPath);

            //This attach the specified screenshot to the test
            Reporter.addScreenCaptureFromPath(screenshotName+".png");
            System.out.println("Cant take screenshot in grid.");
        }
    }

Lianneliao

Answer 6

I tried various sites and blogs for this issue, but couldn't get a solution anywhere. I got below solution after trying various approaches. Try the below solution and it worked perfectly for me.

public static synchronized String addScreenshots(){
     WebDriver webDriver = Browser.getDriver();
     Long l = Calendar.getInstance().getTimeInMillis();
     String screenshotId = l.toString();
     String Path = System.getProperty("user.dir")+"/ExtentReports/"; 

     File screenshot = ((TakeScreenshot)WebDriver).getScreenshotAs(OutputType.FILE);
     String imgPath = Path+screenshotId+".png";
     
     File dest = new File(imgPath);
     try {
         FileUtils.copyFile(screenShot, dest);
     } catch (IOException e) {
         e.printStackTrace();
     }
     
     String ImagePath = "../ExtentReports/"+screenshotId+".png";
     
     return ImagePath;
}

Hocuspocus

Can you a bit clarify about Path in String imgPath = Path+screenshotId+".png";? – Alleyway

In the above code, Path = System.getProperty("user.dir")+"/ExtentReports/"; – Hocuspocus

Answer 7

I tried the following code, and it resulted in a screenshot being recorded in the report.

File file = new File("./Screenshots/" + result.getName() + ".png");

String absolutePath = file.getAbsolutePath();
logger.fail("details", MediaEntityBuilder.createScreenCaptureFromPath(absolutePath).build());

Stanwinn

are you sure it is solving the issue, if it resulted the same error? – Capacious

Answer 8

The below piece of code can solve your problem:

public void reportStatus(ITestResult result){
 if(result.getStatus()==ITestResult.FAILURE){
 
     String screenshotFilePath=takeScreenshotMethod(driver, result.getName());
     extentTest.log(Status.FAIL, "Screenshot", MediaEntityBuilder.createScreenCaptureFromPath(screenshotFilePath).build());
 }
}

Sharpshooter

Answer 9

 public static void TakeScreenshot(Status status, string stepDetail)
        {
            string path = @"C:\ExtentReports\" + "TestExecLog_" + DateTime.Now.ToString("yyyyMMddHHmmss");

            Screenshot image = ((ITakesScreenshot)driver).GetScreenshot();
            image.SaveAsFile(path + ".png", ScreenshotImageFormat.Png);
            ExtentReport.exChildTest.Log(status, stepDetail, MediaEntityBuilder.CreateScreenCaptureFromPath(path + ".png").Build());
        
    }

        public static void ReadJsonObject(string filename)
        {
            string myJsonString = File.ReadAllText(@"..\\..\\..\\" + filename);
            jobject = JObject.Parse(myJsonString);
            
        }

        public static void ReadJsonArray(string filename)
        {
            string myJsonString = File.ReadAllText(@"..\\..\\..\\" + filename);
            jarray = JArray.Parse(myJsonString);
        }

Lardaceous

Answer 10

I just dealt with this issue. In my case, extent report was attaching the image and the path was correct but the image showed up as unloaded image like a small empty square. So, I added 5 seconds wait time before attaching the screenshot to the extent report. And also, I updated the old code which was written for Extent report earlier versions. Now, for extent report version 5, this code below fixed the issue for me. But, even this way, I could not see the screenshot in the report when I opened it using IntelliJ's open in browser way. So, to see screenshots in the report, open the report directly by file explorer. IntelliJ shortcut seems to have stopped working for me.

extentTest.log(status,MediaEntityBuilder.createScreenCaptureFromPath(screenshotPath).build());

Parmer

Answer 11

I had the same issue. I was always trying to open the report from my IDE and the screenshot was broken in that. But when the same was opened from Explorer/Finder I was able to see the report with the screenshot

Syllabize

Answer 12

This is a browser issue. In my system I am getting broken image on Firefox browser but on Chrome browser images are showing properly.

Spectacle

I think this needs more detail - can you say which versions of the browsers you tried and what difference between the browsers you suspect causes the problem on firefox? As it is, this is more like a comment than an answer (though I understand you can't post comments yet, so thanks for your answer) – Haemic