How to take Screenshot of Failed Test Cases in Cucumber

The organizations have now opted for techniques to improve and ease their development and testing procedures. One such way is to go with the BDD (Behavior Driven Development). BDD and Agile together make testing efficient by allowing more contributors to collaborate on a project and increase the value of the out roll product by allowing better sharing of ideas. 

Cucumber Testing Framework is among the most widely used testing frameworks for Advanced BDD Test Automation. The idea behind implementing the BDD is to make the tests understandable for all the contributors, such as Business Analysts, QA, developers, and more, without any technical language. This comfort is given in the BDD because it uses the Gherkin language, which is plain English. Besides, Cucumber support various programming languages, Java, PHP, JavaScript, Net, Python, Perl, and more. 

Why is a Screenshot required in Cucumber Testing?

While using Cucumber, it is very important to know why the test is getting failed. One useful way is to include a screenshot of failed step in the test execution report whenever some scenario is failed. Screenshots help in analyzing where the execution is facing problems and improve the debugging process. 

Screenshots provide better quality and flexibility while debugging failed scenarios. 

How to Set up a Cucumber Project 

Let’s first set up the project using the Cucumber framework:

Step 1: Install IDE and Set up Java

You can install any IDE, however, using Eclipse IDE in this example. Also, install the latest version of Java on your system. To ensure that Java is installed on your system, run a quick command in the terminal to check the Java version. 

Java -version

Step 2: Create a new Maven Project

To create a Maven project, you must install the Maven Plugin. However, in the latest versions of Eclipse, it comes installed already. 

Step 3: Add Maven dependencies to your project

In this step, you have to add several dependencies to your project. Navigate to the pom.xml file in the folder structure and then add the dependencies mentioned below. You can get these dependencies from Maven Repository. 

• Cucumber Java 
• Cucumber JUnit 
• JUnit 
• Selenium Java

Step 4: Create a feature file 

Navigate to src/test/resources in the folder structure and then create a feature folder. Also, add a feature file in the feature folder there. 

Step 5: Install the Cucumber plugin 

You can easily install the Cucumber plugin from the Eclipse marketplace. The Cucumber plugin lets the codebase know that you’re creating a Cucumber project. 

Step 6: Create Step Definitions

To create Step definitions, navigate to the src/test/java package and then add a step definition folder and file there. 

Step 7: Create a Runner Class

Create a class file in the Step Definitions folder and add the runner class script. The runner class will look something like this. 

import org.junit.runner.RunWith;
import io.cucumber.junit.Cucumber;
import io.cucumber.junit.CucumberOptions;

@RunWith(Cucumber.class)
@CucumberOptions(features="src/test/resources/Features",
glue={"StepDefinitions"})
public class TestRunner {
}

Step 8: Set up .properties file 

An extent properties file is necessary for your project because it helps in activating the failed test reports. Before creating the file, you must add a few dependencies, which are the grasshopper extent report adapter plugin and the Extent report library. 

To set up these dependencies, add the following scripts inside the pom.xml file. 

For the grasshopper plugin, the following dependency is required. 

<!-- https://mvnrepository.com/artifact/tech.grasshopper/extentreports-cucumber6-adapter -->
<dependency>
<groupId>tech.grasshopper</groupId>
<artifactId>extentreports-cucumber6-adapter</artifactId>
<version>2.1.0</version>
</dependency>

Similarly, to add the Extent report library, add the following dependency script.

<!-- https://mvnrepository.com/artifact/com.aventstack/extentreports -->
<dependency>
<groupId>com.aventstack</groupId>
<artifactId>extentreports</artifactId>
<version>5.0.4</version>
</dependency>

Now, create a .properties file in the src/test/resources. Secondly, add the following text in the plugin section of your test, so that the runner class of Cucumber can recognize that you want to initiate a report with the help of a certain adapter.

@CucumberOptions(plugin = {"com.aventstack.extentreports.cucumber.adapter.ExtentCucumberAdapter:"})

How to take Screenshots of Failed Test Cases in Cucumber

Let’s now take a practical implementation on how to take screenshots for failed test cases in Cucumber. In this example, we will create an account on Facebook. However, while doing that, we will write a wrong step to get a failed test. This will demonstrate how to take screenshots of failed test cases in Cucumber. 

Step 1: Create a Feature file

@SmokeTest
Feature: login facebook

Scenario: login facebook and create account
Given open safari browser
And navigate to Facebook URL
And user enters firstname as "BrowserStack User"

Step 2: Create a Hooks file inside the Step Definitions folder

package stepDefinitions;

import org.openga. selenium. OutputType:
public class Hooks extends BaseClass {
@After(order = 1)
public void takeScraenshotOnFailure(Scenario scenario) {

if (scenario.isFailed()) {

TakesScreenshot ts = (TakesScreenshot) driver;

byte[] src = ts.getScreenshotAs(QutputType.BYTES);
scenario.attach(src, "image/png", "screenshot");
}

}

@After(order = 0)
public void tearDown() {
driver.close();

}
}

Here, order = 1 denotes that this step will be conducted first, and then the next step order = 2 will take place, thus closing the browser after the screenshot is taken. This step covers the main syntax of taking screenshots of failed tests in Cucumber.

Step 3: Create Page Class file

This step leads us to the Page Object Model in Selenium with the help of Java.

package pages;
import org.openqa.selenium.By;[]
public class Login_Page {

Utils utils= new Utils();

By elements_link = By.xpath("'//div[@class='category-cards']/div[1] /div/div[3]/h5");
By Forms_link = By.xpath("//div[@class='category-cards'div[2]/div/div[3]/h5”);
By textField_firstName = By.xpath("//input[@name=‘firstname123’]”)


public void click_elements() {

utils. clickUsingAction(elements_link) ;
}
public void click Forms() {

utils.click(Forms_link) ;
}

public void EnterFirstName(String firstName ) {
utils.sendKeys(textField_firstName, firstName);
}
}

Step 4: Create a test runner class file 

package runner;

import org.junit.AfterClass;[]
I

@RuniWith(Cucumber.class)
@CucumberOptions(features="./src/test/resources/Features/"


,glue={tepDefinitions"}
,tages = “@SmokeTest"
,plugin = { "pretty", "html: target/cucumber-reports",
"com.aventstack.extentreports.cucumber.adapter.ExtentCucumberAdapter:"}
,monochrome=true
)

public class TestRunner {

}

Step 5: Define the location for the screenshot 

To place the screenshot in some location, you must define the location of the image using the following code. 

#screenshot.dir=test-output/
screenshot.dir=target/
screenshot.rel.path=../

Place this code inside the extent.properties file in the features folder. 

After performing all the above steps. You can see the screenshot of the instance where the step failed. The screenshot gets available inside the folder where you have directed it in the extent.properties file.

On a closing note

Screenshots become very useful while analyzing and debugging your tests. In the above example, we have used Cucumber along with Selenium Webdriver in Java to demonstrate the process. Cucumber offers several useful features, one of which is the use of the BDD (Behavior Driven Development) technique. Cucumber itself doesn’t offer the functionality to take screenshots, however, adding a few lines of Java code into the step definition does the work, making it much more efficient in debugging.

For better accuracy is recommended to test on real devices so as to take real user conditions into account. Testing on tools like BrowserStack Automate allows you to test your website on 3000+ device browser combinations, which helps deliver a seamless user experience.

Run Cucumber Tests on Real Devices