Fix for Broken UI Issue of Extent Report in Jenkins dashboard


Fix for Broken UI Issue of Extent Report in Jenkins dashboard


Most of you might have observed that while we set up and execute our automation script using Jenkins. In Jenkins Dashboard UI of Extent report comes as broken something like below screenshot:


 To know how to set up the extent report in Jenkins. Please refer to this blog.

This is one of the common issue that most of us will face while setting up extent report in Jenkins for the very first time.

This happens because of 'Content-Security-Policy' of Jenkins which is introduced in from v1.641, which is blocking the inline CSS, JS Ajax resources to load.

To know more about Jenkins Content-Security-policy. Please click on this link.




The solution to this issue is actually quite simple. We need to make sure that we start Jenkins server with below command

java -Dhudson.model.DirectoryBrowserSupport.CSP="" -jar jenkins.war


After our Jenkins server is up and running. Now when we go and execute our automation script extent report will get properly displayed.






SHARE THIS

Author:

My Name is Ankur Jain and I am currently working as Automation Test Architect.I am ISTQB Certified Test Manager,Certified UI Path RPA Developer as well as Certified Scrum Master with total 12 years of working experience with lot of big banking clients around the globe.I love to Design Automation Testing Frameworks with Selenium,Appium,Protractor,Cucumber,Rest-Assured, Katalon Studio and currently exploring lot in Dev-OPS as well. I am currently staying in Mumbai, Maharashtra. Please Connect with me through Contact Us page of this website.

Previous Post
Next Post
Anonymous
September 11, 2019 at 4:32 PM

Is there a solution for distorted extent report.
We have our testing suite which runs for around 7 to 8 hours, and after that the html report it generates is kind of distorted and unable to view all scenarios.

Reply
avatar
September 13, 2019 at 2:05 PM

If I understood correctly there are small icons appear in report instead of actual data. The reason for that is those CSS are typically blocked on coperate network.

Reply
avatar
Anonymous
September 17, 2019 at 8:21 PM

What happens actually is the html report we get its feature section is filled with the scenario section details like given..., when..., then... and the scenario Outline section has the details of Features section. and that too are incomplete.
I guess if CSS blocking was the reason then every time we would have got the distorted extent report, but in our case sometimes we get the proper report and sometimes distorted. Its kind of intermittent.
But now the frequency of getting distorted report have increased and impacting us very badly.
Our framework is designed in a way to support parallel execution. Would this be the reason for the scrambled report?
Means while we do flush() multiple test result execution are getting flushed at same time and this might be causing the report to get scrambled.
Please let us know with any approach that we can go ahead and work on fixing it. Even multiple approaches would be helpful.

Reply
avatar
Anonymous
June 16, 2020 at 12:03 PM

We got extent report shown properly, but UI clickable actions are not working, when on clicking Failed tests / any individual test from left pane no action is performed, what was the issue/fix?, thanks!

Reply
avatar
Anonymous
July 22, 2020 at 7:27 PM

You can use this as well:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox allow-scripts; default-src 'self'; script-src * 'unsafe-eval'; img-src *; style-src * 'unsafe-inline'; font-src *");

Reply
avatar
August 17, 2020 at 12:18 AM

I am getting report properly when opening in my browser , but my requirement is to send that report in email. Any suggestions how i can do that. I have tried saving the report as html, but the page is distorted.

Reply
avatar
September 8, 2021 at 1:20 PM

Hi Ankur ,
How to fix the broken images in report , the images are shown perfectly in local , however in jenkins , screenshots are available under the screenshots folder , however the extent report shows broken image.

Reply
avatar