When you have to share the report of automatic runs, pass / fail results for customers and management, in that case you need an HTML report to share the results after each run. In this article I will guide how to setup with 1 HTML file after each run.
1. Create an HTML report by adding the plugin to the TestRunner file
(This method only creates a simple report, which case passes, which ones fail, the statistics of no / fail)
Step 1: In the TestRunner file, add a plugin (as below) to format the result after running into HTML format. You need a link to place the report file, here I have the path: target / htmlreports .
1 2 3 4 5 6 | @CucumberOptions( features = "src/main/Feature/Login.feature" , glue = {"stepDefinition"} ,plugin = {"pretty", "html:target/htmlreports"} ) |
Step 2: Run the TestRunner file, when you are finished you will see the htmlreports folder in the target directory. To open the report, access the project that you already have on your computer and
Step 3: After running, a new folder will be created at the installation path in the plugin. Open the folder on the device (as shown below): 
Here is the report after running:
- When running the pass:
- When running fail, it will be red in the step of fail failure and describe the error:
2. Create reports using Extent-Reports
Step 1: Add dependencies to pom.xml to update the project after adding
1 2 3 4 5 6 7 8 9 10 11 12 | <dependency> <groupId>com.vimalselvam</groupId> <artifactId>cucumber-extentsreport</artifactId> <version>3.0.2</version> </dependency> <dependency> <groupId>com.aventstack</groupId> <artifactId>extentreports</artifactId> <version>3.1.2</version> </dependency> |
Step 2: Add a config folder to the project. (This way you can configure the name, interface, … of the report and detailed statistics of case pass / fail numbers)
For example: Right-click the project name -> Click New -> Folder -> config. Then, you create an XML file: report.xml into this directory, this file contains the title, name, report format, … You can configure the information you want in this file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?xml version="1.0" encoding="UTF-8"?> <extentreports> <configuration> <!-- report theme --> <!-- standard, dark --> <theme>standard</theme> <!-- document encoding --> <!-- defaults to UTF-8 --> <encoding>UTF-8</encoding> <!-- protocol for script and stylesheets --> <!-- defaults to https --> <protocol>https</protocol> <!-- title of the document --> <documentTitle>Selenium Cucumber Framework</documentTitle> <!-- report name - displayed at top-nav --> <reportName>Functional Testing report</reportName> <!-- global date format override --> <!-- defaults to yyyy-MM-dd --> <dateFormat>yyyy-MM-dd</dateFormat> <!-- global time format override --> <!-- defaults to HH:mm:ss --> <timeFormat>HH:mm:ss</timeFormat> <!-- custom javascript --> <scripts> <![CDATA[ $(document).ready(function() { }); ]]> </scripts> <!-- custom styles --> <styles> <![CDATA[ ]]> </styles> </configuration> </extentreports> |
Step 3: Add a plugin to the TestRunner file to format the result after running into HTML format:
1 2 3 4 5 6 7 8 | @CucumberOptions( features = "src/main/Feature/Login.feature" , glue = {"stepDefinition"} , plugin = {"com.cucumber.listener.ExtentCucumberFormatter:target/cucumber-reports/report.html"} , monochrome = true ) |
Step 4: Add a method to the AfterScenario function in the Hooks file
1 2 3 4 5 6 | @After public void AfterScenario(Scenario scenario) { BrowserFactory.closeCurrentBrowser(); Reporter.loadXMLConfig(new File("config/report.xml")); } |
Step 5: After running, a new folder will be created at the path you install in the plugin. Open the folder on the device (as shown below): 
- When running the pass
- When running fail
References: https://www.axelerant.com/resources/team-blog/setup-for-selenium-with-cucumber-using-maven