How to generate HTML Reports in Jenkins

HOME

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

Pre-Requisite:

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.

Create a new Maven Jenkins job

Step 1: Create a new Maven project.

  1. Give the Name of the project.
  2. Click on the Maven project. 
  3. Click on the OK button.

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.

  1. In the Root POM textbox, enter the full path to pom.xml
  2. In the Goals and options section, enter “clean test site

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 HTML directory to archive – target/site/, Index page[s] – surefire-report.html and 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 #1).

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 could 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 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 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

Jenkins GitLab Integration
How to generate HTML Reports in Jenkins
How to create Jenkins pipeline for Serenity tests
How to create Jenkins pipeline for Cucumber tests
How to create Jenkins pipeline for Extent Report
How to run parameterized Selenium tests in Jenkins

4 thoughts on “How to generate HTML Reports in Jenkins

  1. where are the html reports saved after they are generated?
    jenkins shows the msg that:
    [htmlpublisher] Archiving HTML reports…
    [htmlpublisher] Archiving at BUILD level

    but how can i access the archived reports?

    Like

    1. If you see step 6, click on back to project and check to the left side of the page, there will be an option of HTML Report, you can click on that to view the report.

      Like

      1. yes but i want to access the report in Jenkinsfile via groovy script and then use the report for some other purpose. so the intention would be to access it via script and not just gui

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s