How To Generate Extent Reports In Selenium

How To Generate Extent Reports in Selenium On the Cloud?

Using a cloud grid provides additional speed and resources to make the executions faster and more reliable and facilitates parallel execution.

Let’s create classes for the test cases and execute them on the TestMu AI Selenium cloud grid platform. We will also learn how to generate Extent Reports for Selenium automation test cases.

For demonstration purposes, we will use the TestMu AI Selenium Playground to run the tests. This allows us to explore various pages and learn automation.

Below are the two test scenarios we will execute to generate Extent Reports.

Test Scenario 1: Verify the title of the webpage

• Launch TestMu AI Selenium Playground.
• Get the title of the web page and verify it.

Test Scenario 2: Enter single input and verify the message displayed

• Launch TestMu AI Selenium Playground.
• Click Simple Form Demo.
• Enter the message in the textbox under the Single Input Field.
• Click the Get Checked Value button.
• Verify the message displayed in the Your Message section.

Test Scenario 3: Enter multiple inputs and verify the value displayed

• Launch TestMu AI Selenium Playground.
• Click Simple Form Demo.
• Enter the first and second values in textboxes under the Two Input Fields section.
• Click on the Get Sum button.
• Verify the value displayed in the Result section.

Test Scenario 4: Verify alert message

• Launch TestMu AI Selenium Playground.
• Click on Bootstrap Alerts.
• Click Normal Success Message and verify the message displayed.

Now that we know the test scenarios to automate, let us split them into two classes: InputFormTest, which has the first three scenarios, and AlertTests, which has the last test case.

Before implementing the test cases, let us create a BaseTest class with common methods for initializing WebDrivers, connecting to the TestMu AI cloud grid, and generating Extent Reports in Selenium.

package CloudGrid;


import java.net.*;
import java.util.HashMap;


import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.testng.ITestResult;
import org.testng.annotations.*;


import com.aventstack.extentreports.*;
import com.aventstack.extentreports.reporter.ExtentSparkReporter;
import com.aventstack.extentreports.reporter.configuration.Theme;


public class BaseTest {


   public static ExtentSparkReporter extentSparkReporter;
   public static ExtentReports extentReports;
   public static ExtentTest extentTest;


   public RemoteWebDriver driver = null;
   String username = System.getenv("LT_USERNAME") == null ? "<lambdatest_username>" : System.getenv("LT_USERNAME");
   String accessKey = System.getenv("LT_ACCESS_KEY") == null ? "<lambdatest_accesskey>" : System.getenv("LT_ACCESS_KEY");
   String status = "failed";


   @BeforeTest
   public void startReporter()
   {
       extentSparkReporter = new ExtentSparkReporter(
               System.getProperty("user.dir") + "/test-output/extentReport.html");
       extentReports = new ExtentReports();
       extentReports.attachReporter(extentSparkReporter);


       // configuration items to change the look and feel
       // add content, manage tests etc
       extentSparkReporter.config().setDocumentTitle("Simple Automation Report");
       extentSparkReporter.config().setReportName("Test Report");
       extentSparkReporter.config().setTheme(Theme.STANDARD);
       extentSparkReporter.config().setTimeStampFormat("EEEE, MMMM dd, yyyy, hh:mm a '('zzz')'");
   }


   @BeforeMethod
   public void setUp()
   {
       try {
           ChromeOptions chromeOptions = new ChromeOptions();
           chromeOptions.setPlatformName("Windows 10");
           chromeOptions.setBrowserVersion("124.0");


           HashMap<String, Object> ltOptions = new HashMap<String, Object>();
           ltOptions.put("build", "Extent Reports using Selenium Java");
           ltOptions.put("name", "Extent Reports using Selenium Java");
           ltOptions.put("w3c", true);
           chromeOptions.setCapability("LT:Options", ltOptions);


           driver = new RemoteWebDriver(
                   new URL("https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub"), chromeOptions);


           driver.get("https://www.lambdatest.com/selenium-playground/");


       } catch (MalformedURLException e) {
           e.printStackTrace();
       }
   }


   @AfterMethod
   public void updateResultAndcloseDriver(ITestResult result)
   {
       if(result.getStatus() == ITestResult.FAILURE) {
           extentTest.log(Status.FAIL,result.getThrowable());
       }
       else if(result.getStatus() == ITestResult.SUCCESS) {
           extentTest.log(Status.PASS, result.getTestName());
       }
       else {
           extentTest.log(Status.SKIP, result.getTestName());
       }
      
       driver.executeScript("lambda-status=" + status);
       driver.quit();
   }


   @AfterTest
   public void endReport()
   {
       extentReports.flush();
   }
}

Below is the code walkthrough to understand the working of the BaseTest file in detail.

Code Walkthrough:

• Create objects of Extent reports classes and public variables to be accessed in the test cases.

• Create an instance of Selenium RemoteWebDriver and initialize it to null.

• Add the TestMu AI Username and Access Key for your account to be used to run the script. You can find these details in your TestMu AI Profile section by navigating to Account Settings > Password & Security.

• Add a String variable status and initialize with the value as failed. This will be used to update the test status on the TestMu AI dashboard to pass/fail.

  

• Add the first method in this class as startReporter() and annotate it with @BeforeTest annotations to execute before the test starts and make the setup and configuration for the Extent Reports.


The steps in this method are exactly similar to what you understood in the above section. Please refer to the same if required.

The startReporter() method is similar to the approach described in the section above. This method is annotated with @BeforeTest to ensure its execution before any test method in the class. Within startReporter(), an ExtentHtmlReporter object is created, specifying the file location for the report.

Subsequently, an ExtentReports object is instantiated, and the ExtentHtmlReporter is attached to it using the attachReporter() method. This setup guarantees that Extent Reports are configured before the test execution, enabling the generation of detailed HTML reports to monitor test results.


• Next, add a setUp() method for WebDriver setup and connect to the TestMu AI remote cloud grid for executing the test cases. Annotate this with @BeforeMethod annotation to execute before each test case.

• Create an object of the ChromeOptions class, which defines browser properties like browser version, OS version, etc.

• Next, you define the additional variables to set values like build, name, or any other browser property/behavior. These are used for test execution on TestMu AI. This is done with the help of a HashMap variable, which is then passed to chromeOptions.


TestMu AI provides a way to easily retrieve these properties and values using the TestMu AI Capabilities Generator. You only must select the required operating system, browser combination, and versions. The rest is done for you, and you have the code ready.


• Create an instance of RemoteWebDriver to connect to the TestMu AI cloud grid using all these properties.

• Now that we have connected to the remote grid and have all the properties in place navigate to the test website, i.e., TestMu AI Selenium Playground, as per the test scenario.

• Add a new method updateResultAndcloseDriver(), to close the driver instance after each test case and update the results on the TestMu AI dashboard and on the Extent Report by using Listeners. This method is annotated with @AfterMethod to execute after each test case.

• Using the ITestResult interface object, you can get the test result, compare it using the if-else loop, and log the result on the Extent Reports as well.

  

• Next, execute the script to update test results on the TestMu AI dashboard using the status variable.

  

• Finally, close the remote WebDriver instance after the test execution is completed.

• Add the last method in this class as endReport() to close the Extent Reports class and annotate this with @AfterTest annotation to remove all data before the next execution starts.

After understanding the BaseTest.java file for configurations, the next step is to add both the test class files individually.

package CloudGrid;


import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;


import com.aventstack.extentreports.Status;


public class InputFormTests extends BaseTest{
  
   @Test
   public void verifyTitle()
   {
       String methodName = new Exception().getStackTrace()[0].getMethodName();
      
       System.out.println("Test execution started : " + methodName);
      
       extentTest = extentReports.createTest(methodName,"verify_Page_Title");
       extentTest.log(Status.INFO,"Starting test to verify title");
       String title ="Selenium Grid Online | Run Selenium Test On Cloud";
       Assert.assertEquals(title,driver.getTitle());
       extentTest.log(Status.INFO,"Verified the expected page title as : " + title);
      
       status = "passed";
      
       System.out.println("Test execution completed : " + methodName);
   }


   @Test
   public void singleInputTest()
   {
       String methodName = new Exception().getStackTrace()[0].getMethodName();
      
       System.out.println("Test execution started : " + methodName);
      
       extentTest = extentReports.createTest(methodName,"single_input_test");
       extentTest.log(Status.INFO,"Starting test to verify single input");
      
       //Clicks on the simple form demo option in the selenium playground
       extentTest.log(Status.INFO,"Clicking on Simple Form Demo");
       driver.findElement(By.xpath("//*[text()='Simple Form Demo']")).click();
          
       //Enter the message in the enter message input box
       String expectedMessage = "Hello World";
       extentTest.log(Status.INFO,"Entering the message as : " + expectedMessage);
       driver.findElement(By.id("user-message")).sendKeys(expectedMessage);
          
       //Click on Get checked value button
       extentTest.log(Status.INFO,"Clicking on Get checked value");
       driver.findElement(By.id("showInput")).click();
      
       //Retrieve the entered user message
       String actualMessage = driver.findElement(By.id("message")).getText();
       Assert.assertEquals(actualMessage, expectedMessage, "Expected and actual texts do not match.");
       extentTest.log(Status.INFO,"Verified the expected message as : " + expectedMessage);
      
       status = "passed";
      
       System.out.println("Test execution completed : " + methodName);
   }
  
   @Test
   public void multipleInputTest()
   {
       String methodName = new Exception().getStackTrace()[0].getMethodName();
      
       System.out.println("Test execution started : " + methodName);
      
       extentTest = extentReports.createTest(methodName,"multiple_input_test");
       extentTest.log(Status.INFO,"Starting test to verify multiple input");
      
       //Click on the simple form demo option in the selenium playground
       extentTest.log(Status.INFO,"Clicking on Simple Form Demo");
       driver.findElement(By.xpath("//*[text()='Simple Form Demo']")).click();
      
       //Enter the first and second value
       extentTest.log(Status.INFO,"Entering the values as 5 and 10");
       driver.findElement(By.id("sum1")).sendKeys("5");
       driver.findElement(By.id("sum2")).sendKeys("10");
      
       //Click on the Get Sum button
       extentTest.log(Status.INFO,"Clicking on Get Sum");
       driver.findElement(By.xpath("//button[text()='Get Sum']")).click();
       //Fetch the result value and assert same
       String actualSum = driver.findElement(By.id("addmessage")).getText();
       Assert.assertEquals(actualSum,"15", "Expected and actual values do not match.");
       extentTest.log(Status.INFO,"Verified the expected sum as : 15");
      
       status = "passed";
      
       System.out.println("Test execution completed : " + methodName);
   }
}

We will then understand the code before executing and generating the Extent Reports in Selenium and TestNG for cloud grid execution.

Code Walkthrough:

• Add the first test class and name it InputFormTests, and extend BaseTest in this to inherit all the common variables and functions to access the Extent Report and WebDriver.

• Add the first test case as verifyTitle() and annotate it with @Test annotation.

• Fetch and store the test case name in a variable. Using this variable, log test execution started info on both the console and Extent Reports by creating a new test.

• Fetch the web page title using the getTitle() function and assert the same with the expected title.

• Update the status variable to be passed for logging success results on the TestMu AI dashboard.

• Add the next test case and name it singleInputTest(), annotate it with @Test annotation.

• Start by fetching the test method name, logging the same, and creating a new extent test.

• Click on the Simple Demo Form link.

• Under the single input section, enter the message in the textbox.

• Click on the Get Checked Value button to get the response.

• Fetch the response message and compare it with the expected message entered initially.

• Update the status to be passed to reflect on the TestMu AI dashboard.

• Finally, add the last test case as multipleInputTest() and annotate it with @Test annotation for execution.

• Fetch the test method name, log the same, and create a new test.

• Click on the Simple Demo Form link.

• Enter the first and second values under the Two Input Fields section.

• Click on the Get Sum button to get the sum of the entered values.

• Fetch and assert the sum value with the expected value and log the same as the info in the Extent Reports.

• Lastly, update the status value to be passed when logging on to the TestMu AI dashboard.

As we have covered all three test scenarios in the InputFormTests.java test file, we will create a new file called AlertTests.java for test scenario four.

package CloudGrid;


import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;


import com.aventstack.extentreports.Status;


public class AlertTests extends BaseTest
{
   @Test
   public void testSimpleAlertMessage()
   {
       String methodName = new Exception().getStackTrace()[0].getMethodName();
      
       System.out.println("Test execution started : " + methodName);
      
       extentTest = extentReports.createTest(methodName,"simple_alert_message");
       extentTest.log(Status.INFO,"Starting test to verify simple alert message");
      
       //click on Bootstrap alerts
       extentTest.log(Status.INFO,"Clicking on Bootstrap Alerts");
       driver.findElement(By.linkText("Bootstrap Alerts")).click();
      
       //click on Normal success message
       extentTest.log(Status.INFO,"Clicking on Normal Success Message");
       driver.findElement(By.xpath("//*[text()='Normal Success Message']")).click();
      
       //fetch actual message and compare it with the expected message
       String expectedMessage = "×
Normal success message. To close use the close button.";
       String actualMessage = driver.findElement(By.xpath("//*[contains(@class,'alert-success-manual')]")).getText();
       Assert.assertEquals(actualMessage, expectedMessage, "Expected and actual message do not match.");
       extentTest.log(Status.INFO,"Verified the expected message as : " + expectedMessage);
      
       status = "passed";
      
       System.out.println("Test execution completed : " + methodName);
   }
}

Before we jump to the test results, let’s understand the code in the AlertTest.java file to understand how it works in detail.

Code Walkthrough:

• Add a new test class file as AlertTests and extend BaseTest in it.

• Add the test method and name it testSimpleAlertMessage(), and annotate this with @Test annotation as we are using TestNG for test execution.

• Fetch and store the test class name in a variable and log it on the console.

• Next, use the method name to create a new test in the extent report and log information stating that the test execution started.

• Click on the Bootstrap Alerts link text.

• Click on the Normal Success Message alert button.

• Fetch the actual displayed message and store it in a String-type variable. Using the Assert class method, we compare this fetched message with the expected message and log the same.

• Finally, update the status variable to be passed to log the test execution status on the TestMu AI dashboard.

With this, the test cases are ready to be executed. To execute them together and get the Extent Reports for both test scenarios, you can use the below testng.xml to execute the scenarios.

<<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Extent Report Tests">
   <test name="Tests">
       <classes>
           <class name="CloudGrid.InputFormTests" />
           <class name="CloudGrid.AlertTests"></class>
       </classes>
   </test> <!-- Test -->
</suite> <!-- Suite --> 

Test Execution:

Executing the above XML would give results like the one below on the console.

Refresh the project and navigate to the test-output folder to see the generated Extent Reports.

Since the test scenarios were executed on the TestMu AI cloud grid platform, you can view the results on the TestMu AI dashboard.

To access the test results, navigate to the Automation > Web Automation section on the dashboard.

Capturing Screenshots in Extent Reports

While working with web automation, screenshots for failed cases are very helpful in debugging and understanding issues. Screenshots allow testers to see and compare the UI at the point of failure to the expected results, deduce proper outcomes, and proceed with fixes.

Using Extent Reports provides the advantage of capturing screenshots and attaching them to the failed test case logs in the report for better visibility.

Let us see how to modify the code to capture screenshots for a failed case. However, if required, you can capture screenshots per the use case at any step.

To achieve the same add the below method to captureScreenshot() in the BaseTest.java and call this in an if-else loop for the Failed test case condition inside updateResultAndcloseDriver().

Updated updateResultAndcloseDriver() would look like shown below.

Code for the method captureScreenshot() would be

public void captureScreenshot()
   {
       try
       {
           System.out.println("Taking screenshot for failed assert");
           String screenshotPath = System.getProperty("user.dir") + "/test-output/screenshots";
           File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
          
           System.out.println("Adding screenshot to extent report");
           String screenshotName = "screenshot_" + new Random().nextInt(999) + ".png";
           screenshotPath = screenshotPath + File.separator + screenshotName;
           Files.copy(screenshot, new File(screenshotPath));
           extentTest.addScreenCaptureFromPath(screenshotPath);
       } catch (IOException e)
       {
           e.printStackTrace();
       }
   }

Code Walkthrough:

• Add a new directory inside the test-output directory to save screenshots.

• Take a screenshot using the getScreenshotAs() method of the WebDriver and save it in a File class object.

• Create a new random screenshot name for the captured image. To make it unique, we use the Random() function to generate a random 3-digit number.

• Copy the captured screenshot from Step 2 inside the screenshots directory with the name created in Step 3.

• Lastly, use the addScreenCaptureFromPath() of the ExtentTest class to attach the captured screenshot to the respective test case for displaying in the extent report.

To demonstrate the working of this capture screenshot method, we modify the assert on the multipleInputTest() test case inside the InputFormTests test class to fail intentionally.

Test Execution:

Executing the above test case will give an output like the one below on the console.

Navigating to the /test-output/screenshots directory, we can see that the screenshot was captured and added here.

On the Extent Report, you can see that the screenshot is attached and is visible. We can also click on this screenshot to get the enlarged view and check the UI at the time of failure.

Also, since we are using the TestMu AI Selenium cloud grid, you can navigate to the dashboard and see that the test execution is marked as failed.

To learn how to run your test scripts on the TestMu AI platform, watch this video tutorial and get detailed insights.