HOME

In the previous tutorial, we saw the Integration of Allure Report with Jenkins. In this tutorial, we show you how to generate an HTML Report Using Jenkins. 

Table of Contents

1. Prerequisite
2. Implementation Steps
   1. Create a new Maven project
   2. Build Management
   3. Select a custom workspace
   4. Select “Publish HTML reports” from “Post Build Actions”
   5. Execute the tests
   6. View the HTML Report

Prerequisite

Jenkin’s installed and started on the computer. The current Jenkins version is – 2.361.2

Implementation Steps

To generate HTML Report in Jenkins, we need to download HTML Publisher Plugin. Please refer to this tutorial to install the plugin – How to install Plugins in Jenkins.

Step 1: Create a new Maven project

In the General section, enter the project description in the Description box.

Select Source Code Management as None if the project is locally present on the machine.

Step 2: Build Management

Go to the Build section of the new job.

Here, I have used the Selenium project with JUnit, so to see the complete project, please refer to this tutorial –  How to generate JUnit4 Report.

Click on the Advanced button.

Step 3: Select a custom workspace

Mention the full path of the project in the directory.

Step 4: Select “Publish HTML reports” from “Post Build Actions”

Scroll down to “Post Build Actions” and click on the “Add Post Build Actions” drop-down list. Select “Publish HTML reports“. 

If you want to see where the report is saved in Jenkins, go to the Dashboard ->HTMLReport_Demo project -> Workspace ->target -> site -> surefire-report.html.

Enter the below details to publish HTML reports

HTML directory to archive – target/site/

Index page[s] – surefire-report.html

Report title – HTML Report

Click on the Apply and Save buttons.

We have created a new Maven project “HTMLReport_Demo” with the configuration to run the Selenium with JUnit4 Tests and also to generate HTML Report after execution using Jenkins.

Step 5: Execute the tests

Let’s execute it now by clicking on the “Build Now” button. 

Right-click on Build Number (here in my case it is #2).

Click on Console Output to see the result.

Step 6: View the HTML Report

Once the execution is completed, click on go “Back to Project“, and we can see a link to view the “HTML Report“.

We can see here that the HTML Report link is displayed in the Console.

Below is the HTML Report generated in Jenkins.

We can see that the HTML Report does not look very pretty. The reason is that CSS is stripped out because of the Content Security Policy in Jenkins.

The default rule set in Jenkins is:

sandbox; default-src 'none'; img-src 'self'; style-src 'self';

To know more about this, please refer to this tutorial – https://www.jenkins.io/doc/book/security/configuring-content-security-policy/.

We can customize the Content Security Policy in Jenkins. But keep in mind that it should be done after checking with the Security team in your organization. This is a workaround solution. I can’t emphasize enough that this is not a standard practice.

Go to Manage Jenkins -> Manage Nodes and Clouds.

Click on the Script Console option.

Type in the following command and Press Run. If you see the output as ‘Result:’ then the protection is disabled. Re-run your build and you can see that the new HTML files archived will have the CSS enabled.

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","")

Re-run the HTMLReport_Demo project. Now you can see a properly rendered HTML Report.

Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!! Cheers!!

Additional Tutorials