Test Category

Test Blog Post

Starter template for writing out a blog post using MDX/JSX and Next.js.

Abdullah Muhammad

Published on May 17, 2026 • 5 min read• 2 views

Introduction

In the last couple of tutorials, we shifted focus to testing using Selenium WebDriver and explored the Page Object Model as a method for test implementation.

Today, we will focus on another concept known as BDD or Behaviour-Driven Development. We will implement BDD using the same web application from the last two tutorials.

Behaviour-Driven Development builds upon TDD (Test-Driven Development) which is a concept you might already be familiar with.

Unlike TDD, which enforces writing test code prior to actual application code, BDD allows for the collaboration of developers and testers to help understand business requirements in order to build out the application.

Continuous feedback through automation testing allows developers and testers alike to understand key areas of improvement and a more rigorous approach to meeting business requirements.

Incorporating the Cucumber framework along with the Selenium WebDriver automation tool allows for seamless BDD.

What is the Cucumber Framework?

The Cucumber framework allows one to implement BDD through the use of scenarios written plain English. These are written in files known as feature files.

If you are familiar with Domain-Specific Languages (DSL), you might be familiar with Gherkin. It is what is used to write the different scenarios using English.

The ability to write in plain English enables testers, developers, and other non-technical entities to readily understand what/how the different components of an application are being tested.

The feature files outline step-by-step, different scenarios for the purposes of testing.

Descriptions for the different scenarios allows for clear documentation of test cases, outlining specific conditions for a particular test, and a step-by-step process for running each test case.

Each scenario outlined in a feature file is written in a Given-When-Then format which describes the different test cases.

The Given clause outlines preconditions before any action takes place. Multiple actions within test cases can be outlined in separate When clauses and the Then clause outlines what the end result should be.

Certain test cases can take in predefined input to test web elements. These specific test cases are written as a Scenario Outline.

Parameterization is supported within feature files and a list of different inputs can be provided in Data Tables in a separate clause known as Examples.

Each feature file is implemented in its own Java class known as a Step Definition file.

"So where is the Selenium WebDriver integrated in all this?"

As seen in the previous two tutorials, we follow the same principles related to test automation.

This includes following the Page Object Model as before, but now incorporating different feature files that correspond to each page outlining different scenarios for testing.

For each feature file, we create a separate Step Definition Java class which implements the different steps from the feature file. This is where we integrate Selenium WebDriver and use the specific POM class (as seen before).

Testing the behaviour of an application to ensure it conforms to what is required enables a team to quickly scale the development of the application.

Code Overview

You can follow along by cloning this repository. The directory we will work with is /demos/Demo42_Selenium_WebDriver_Cucumber_Testing.

The web application we will test is the same as the one we tested in the last tutorial. The codebase resides in /webapp and is essentially the same.

Feel free to explore the React.js application, but we will focus on the directory /webapp/selenium_test_2. Under /src/test/java, you will find four different directories:

features — Includes a feature file for each of the three different components (HomePage, Navbar, and SearchPage)
options — Includes the Runner class for running through the different step definition classes
pages — Contains the POM implementations for the three different components (HomePage, Navbar, and SearchPage)
stepDefinitions — Contains the step definition implementations for the three different components

Let us start by examining the features package.

Feature Files

We will start by looking at the first feature file in the features directory.

Here is the HomePage.Feature file containing the different scenarios for testing the HomePage component:

GitHub GistGherkin

mdxgists.net

Feature: Testing display and content of Home Page

Scenario: User on the Home Page, selects the Home link
Given User lands on Home Page
When  User selects the Home link
Then  Redirect User to the Home Page


Scenario: User on the Home Page, selects the Search link
Given User lands on Home Page
When  User selects the Search link 
Then  Redirect User to the Search Page

HomePage.Feature file containing the two different testing scenarios for testing the Home Page component

As you can see, we have the Feature clause at the top which highlights, at a high level, what we are testing.

This is followed by individual scenarios highlighted by the Scenario clause each with their own set of Given, When, and Then clauses which detail the different steps for testing.

Writing a feature file is that simple. It does not get more complicated than that.

Here is the Navbar.Feature file in the features directory outlining the different scenarios for testing the Navbar component:

GitHub GistGherkin

mdxgists.net

Feature: Testing display and content of the Navbar

Scenario: User on the Home Page, views the Navbar
Given User lands on Home Page
When  User selects the Navbar
Then  Navbar links should be visible

Scenario: User on the Search Page, views the Navbar
Given User lands on Search Page
When  User selects the Navbar
Then  Navbar links should be visible

Navbar.Feature file containing the different scenarios for testing the Navbar component

Similar to how we tested the Navbar component before, it is as straight forward as it gets when we incorporate the Cucumber framework.

Finally, here is the SearchPage.Feature file for testing the SearchPage component. Like the other feature files we looked at, it also resides in the features directory:

GitHub GistGherkin

mdxgists.net

Feature: Testing display and content of Search Page

Scenario: User on the Search Page, selects the Home link
Given User lands on Search Page
When  User selects the Home link
Then  Redirect User to the Home Page

Scenario: User on the Search Page, selects the Search link
Given User lands on Search Page
When  User selects the Search link
Then  Redirect User to the Search Page

Scenario Outline: User on the Search Page, enters text
Given User lands on Search Page
When  User selects form and enters text <Text>
Then  Display text as an Alert upon submission
Examples:
	| Text 							          |	
	| "abc"			  							  |
	| "123"   							      |
	| "This is a test sentence!"  |
	| "Hello World!"  		   			|
	| "Just Searching"            |

SearchPage.Feature file containing the different scenarios for testing the Search Page component

As discussed earlier, we can test certain web components using pre-defined input through Parameterization and specific scenarios known as Scenario Outline.

We have an input field on the Search Page. We are testing its functionality in the last scenario.

We pass test values into a field known as Text. Parameterization allows us to use angular brackets (outlined as <>) and the variable name in the Examples clause (Text) to determine which step to pass in the input.

That is pretty much all there is to it! Incorporating feature files for implementing BDD is that easy!

We now focus on implementing each of these different scenarios.

Step Definition Files

We will start by implementing all the steps in the HomePage.Feature file which we examined above.

In the /src/test/java, you will find the stepDefinitions package, as mentioned earlier.

You will find the implementation of all the steps in all the scenarios outlined in the HomePage.Feature file in the HomePageStepDefinition.java file:

GitHub GistJava

mdxgists.net

package stepDefinitions;

import java.time.Duration;

import org.junit.Assert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import io.cucumber.java.en.When;
import pages.HomePage;
import pages.Navbar;


public class HomePageStepDefinition {
	private WebDriver driver;
	private HomePage homePageInstance;	
	private Navbar navbarInstance;
	
	@Given("User lands on Home Page")
	public void user_lands_on_Home_Page() {
		System.setProperty("webdriver.chrome.driver", "chromedriver.exe"); // Wild card address added for example

		this.driver = new ChromeDriver(); // Setting up driver
		this.driver.get("http://localhost:3000"); // Launch home page of the Cucumber Framework project

		this.driver.manage().window().maximize(); // Maximize window
		this.driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
		 
		homePageInstance = new HomePage(this.driver);
		navbarInstance = new Navbar(this.driver);

		String homePageTitle = homePageInstance.getHeadingText();
		String homeParagraphText = homePageInstance.getParagraphText();
		
		Assert.assertEquals("http://localhost:3000", this.driver.getCurrentUrl());
		Assert.assertEquals("The Cucumber Framework", homePageTitle);
		Assert.assertEquals("Utilizing Selenium WebDriver using a new testing framework", homeParagraphText);
	}
	
	// Testing selecting the Home Navbar link on Home Page
	@When("User selects the Home link")
	public void user_selects_the_home_link() {
		String navbarHomeAnchorText = navbarInstance.getNavbarHeadingAnchorText();
		Assert.assertEquals(navbarHomeAnchorText, "Selenium WebDriver and the Cucumber Framework");
	}
	
	// Testing selecting the Search Navbar link on Search Page
	@When("User selects the Search link")
	public void user_select_the_search_link() {
		String navbarSearchAnchorText = navbarInstance.getNavbarSearchAnchorText();
		Assert.assertEquals(navbarSearchAnchorText, "Search");
	}
	
	// Testing User redirect to Home Page
	@Then("Redirect User to the Home Page")
	public void redirect_user_to_the_home_page() {
		navbarInstance.selectNavbarHeadingAnchorText();
		Assert.assertEquals("http://localhost:3000", navbarInstance.getWebDriver().getCurrentUrl());
	}
	
	// Testing User redirect to Search Page
	@Then("Redirect User to the Search Page")
	public void redirect_user_to_the_search_page() {
		navbarInstance.selectNavbarSearchAnchorText();
		Assert.assertEquals("http://localhost:3000/search", navbarInstance.getWebDriver().getCurrentUrl());
	}
}

HomePageStepDefinition.java file implementing the different steps in the HomePage.Feature file

We make use of built-in annotations provided by the Cucumber framework dependency.

For each of the different clause types, we have a corresponding annotation that represents them (@Given, @When, and @Then).

Beside each annotation, we re-write what is written in the specific scenario step from the particular feature file.

Below each, we create a public method that implements what is described of it.

This is where we incorporate the Selenium WebDriver, the different page classes that implement POM (as seen before), and the Assert class provided by the JUnit testing dependency to complete the scenario testing.

As you can see, this provides clarity in testing. Each annotation is like a step in testing and it organizes the code in a way that developers and non-developers alike can understanding what/how the component is being tested.

In the same directory, you will find the NavbarStepDefinition.java file which implements the steps found in the Navbar.Feature file:

GitHub GistJava

mdxgists.net

package stepDefinitions;

import java.time.Duration;

import org.junit.Assert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import io.cucumber.java.en.When;
import pages.HomePage;
import pages.Navbar;
import pages.SearchPage;

public class NavbarStepDefinition {
	private WebDriver driver;
	private HomePage homePageInstance;
	private SearchPage searchPageInstance;
	private Navbar navbarInstance;
	
	@Given("User lands on Home Page")
	public void user_lands_on_Home_Page() {
		System.setProperty("webdriver.chrome.driver", "chromedriver.exe"); // Wild card address added for example

		this.driver = new ChromeDriver(); // Setting up driver
		this.driver.get("http://localhost:3000"); // Launch home page of the Cucumber Framework project

		this.driver.manage().window().maximize(); // Maximize window
		this.driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
		 
		homePageInstance = new HomePage(this.driver);
		navbarInstance = new Navbar(this.driver);

		String homePageTitle = homePageInstance.getHeadingText();
		String homeParagraphText = homePageInstance.getParagraphText();
		
		Assert.assertEquals("http://localhost:3000", homePageInstance.getWebDriver().getCurrentUrl());
		Assert.assertEquals("The Cucumber Framework", homePageTitle);
		Assert.assertEquals("Utilizing Selenium WebDriver using a new testing framework", homeParagraphText);
	}
	
	@Given("User lands on Search Page")
	public void user_lands_on_Search_Page() {
		System.setProperty("webdriver.chrome.driver", "chromedriver.exe"); // Wild card address added for example

		this.driver = new ChromeDriver(); // Setting up driver
		this.driver.get("http://localhost:3000"); // Launch home page of the Cucumber Framework Project

		this.driver.manage().window().maximize(); // Maximize window
		this.driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
		 
		homePageInstance = new HomePage(this.driver);
		searchPageInstance = new SearchPage(this.driver);
		navbarInstance = new Navbar(this.driver);

		navbarInstance.selectNavbarSearchAnchorText();
		
		Assert.assertEquals("http://localhost:3000/search", searchPageInstance.getWebDriver().getCurrentUrl());
		Assert.assertEquals("Search Form", searchPageInstance.getSearchPageHeadingText());
		Assert.assertEquals("Testing application search functionality", searchPageInstance.getSearchPageParagraphText());
	}
	
	// Testing selecting the Navbar link on any page
	@When("User selects the Navbar")
	public void user_selects_the_navbar() {
		String navbarHomeAnchorText = navbarInstance.getNavbarHeadingAnchorText();
		String navbarSearchAnchorText = navbarInstance.getNavbarSearchAnchorText();
		
		Assert.assertEquals("Selenium WebDriver and the Cucumber Framework", navbarHomeAnchorText);
		Assert.assertEquals("Search", navbarSearchAnchorText);
	}

	// Testing User redirect to Search Page
	@Then("Navbar links should be visible")
	public void navbar_links_should_be_visible() {
		navbarInstance.selectNavbarHeadingAnchorText();
		String homeAnchorURL = navbarInstance.getWebDriver().getCurrentUrl();
		
		navbarInstance.selectNavbarSearchAnchorText();
		String searchAnchorURL = navbarInstance.getWebDriver().getCurrentUrl();
		
		Assert.assertEquals("http://localhost:3000", homeAnchorURL);
		Assert.assertEquals("http://localhost:3000/search", searchAnchorURL);
	}
}

NavbarStepDefinition.java file implementing the different steps in the Navbar.Feature file

We are testing the Navbar component and make use of the different annotations to represent the steps found in the Navbar.Feature file.

For each, we provide its implementation. Finally, we test the SearchPage component.

In the same directory, you will find the SearchPageStepDefinition.java file containing the implementation of steps outlined in the SearchPage.Feature file:

GitHub GistJava

mdxgists.net

package stepDefinitions;

import java.time.Duration;

import org.junit.Assert;
import org.openqa.selenium.Alert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import io.cucumber.java.en.When;
import pages.Navbar;
import pages.SearchPage;

public class SearchPageStepDefinition {
	private WebDriver driver;
	private SearchPage searchPageInstance;
	private Navbar navbarInstance;
	
	@Given("User lands on Search Page")
	public void user_lands_on_Search_Page() {
		System.setProperty("webdriver.chrome.driver", "chromedriver.exe"); // Wild card address added for example

		this.driver = new ChromeDriver(); // Setting up driver
		this.driver.get("http://localhost:3000"); // Launch home page of the Cucumber Framework Project

		this.driver.manage().window().maximize(); // Maximize window
		this.driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
		 
		searchPageInstance = new SearchPage(this.driver);
		navbarInstance = new Navbar(this.driver);

		navbarInstance.selectNavbarSearchAnchorText();
		
		Assert.assertEquals("http://localhost:3000/search", searchPageInstance.getWebDriver().getCurrentUrl());
		Assert.assertEquals("Search Form", searchPageInstance.getSearchPageHeadingText());
		Assert.assertEquals("Testing application search functionality", searchPageInstance.getSearchPageParagraphText());
	}
	
	// Testing selecting the Home Navbar link on Home Page
	@When("User selects the Home link")
	public void user_selects_the_home_link() {
		String navbarHomeAnchorText = navbarInstance.getNavbarHeadingAnchorText();
		Assert.assertEquals(navbarHomeAnchorText, "Selenium WebDriver and the Cucumber Framework");
	}
	
	// Testing selecting the Search Navbar link on Search Page
	@When("User selects the Search link")
	public void user_select_the_search_link() {
		String navbarSearchAnchorText = navbarInstance.getNavbarSearchAnchorText();
		Assert.assertEquals(navbarSearchAnchorText, "Search");
	}
	
	// Testing User input in Search form
	@When("User selects form and enters text \\”([^\\”]*)\\")
	public void user_selects_form_and_enters_text(String text) {
		searchPageInstance.setFormInput(text);
		searchPageInstance.clickFormButton();
	}

	// Testing User redirect to Home Page
	@Then("Redirect User to the Home Page")
	public void redirect_user_to_the_home_page() {
		navbarInstance.selectNavbarHeadingAnchorText();
		Assert.assertEquals("http://localhost:3000", navbarInstance.getWebDriver().getCurrentUrl());
	}
	
	// Testing User redirect to Search Page
	@Then("Redirect User to the Search Page")
	public void redirect_user_to_the_search_page() {
		navbarInstance.selectNavbarSearchAnchorText();
		Assert.assertEquals("http://localhost:3000/search", navbarInstance.getWebDriver().getCurrentUrl());
	}
	
	// Testing Alert window feature
	@Then("Display text as an Alert upon submission")
	public void display_text_as_an_alert_upon_submission() {
		// Switch perspective to Alert window
		Alert alert = searchPageInstance.getWebDriver().switchTo().alert();
		alert.dismiss();
		
		// Setting a default list of strings to ensure alert text matches one of these
		String[] textTypes = new String[] { "abc", "123", "This is a test sentence!", "Hello World!", "Just Searching" };
		String alertText = alert.getText();
		
		boolean matchingFlag = false;
		
		// Check to see if a match is found
		// If so, pass the test
		for (String phrase: textTypes) {
			if (alertText.equals(phrase)) {
				matchingFlag = true;
				break;
			}
		}
		
		Assert.assertEquals(matchingFlag, true);
	}
}

SearchPageStepDefinition.java file implementing the different steps of the SearchPage.Feature file

Nothing new on the whole, except for when we implement the Scenario Outline.

Recall that we can pass input to test certain web components. For the @When(“User selects form and enters text \”([^\”])\”) step, we are testing the search form.

We use a regular expression to indicate input.

Directly under the method definition for the step, we pass in a parameter which represents the input. Each parameter corresponds to the variable outlined in the particular scenario clause.

Recall when we discussed Parameterization in the feature files. This is where we are implementing it live in action.

That is all there is to it. Implementing BDD using the Cucumber framework alongside Selenium WebDriver is very easy.

Now we briefly look at the class which brings it all together.

Cucumber Runner Class

Before we can run through all the different feature files and step definitions, we must provide an entry point in order to do this. For initiating the process, we must define a Runner class.

This can be found in the options directory in /src/test/java, as discussed earlier. The class name is TestRunner.java and looks like this:

GitHub GistJava

mdxgists.net

package options;

import org.junit.runner.RunWith;

import io.cucumber.junit.Cucumber;
import io.cucumber.junit.CucumberOptions;

@RunWith(Cucumber.class)
@CucumberOptions(
		features="src/test/java/features", 
		glue="stepDefinitions"
)
public class TestRunner {

}

TestRunner.java class containing annotations outlining the location of the feature files and step definition files

It is an empty class, but contains two key annotations:

@RunWith — Indicates that the Cucumber framework must be used
@CucumberOptions — Specifies the different options for testing. We make use of the features and glue options which indicate where the feature files and their implementations reside.

All that needs to happen is running this class as a Junit test*. It will simply scan through to find the feature files and run through all the step definition implementations to complete testing.

That is all there is to it!

Feel free to explore the pages directory if you like, but it is the same as before.

For each of the three different components (HomePage, Navbar, and SearchPage), there is a separate page class which implements POM, as covered in the previous tutorials.

Demo Time!

Before we dive into the actual demo, it would be nice if we detail the dependencies used in this project.

In the root location of the /webapp/selenium_test_2 directory, you will find the following pom.xml file:

GitHub GistMaven POM

mdxgists.net

<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>selenium_test_2</groupId>
  <artifactId>selenium_test_2</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <dependencies>
	<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
	<dependency>
	    <groupId>org.seleniumhq.selenium</groupId>
	    <artifactId>selenium-java</artifactId>
	    <version>4.19.1</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/io.cucumber/cucumber-java -->
	<dependency>
	    <groupId>io.cucumber</groupId>
	    <artifactId>cucumber-java</artifactId>
	    <version>7.17.0</version>
	</dependency>	
	<!-- https://mvnrepository.com/artifact/io.cucumber/cucumber-junit -->
	<dependency>
	    <groupId>io.cucumber</groupId>
	    <artifactId>cucumber-junit</artifactId>
	    <version>7.17.0</version>
	    <scope>test</scope>
	</dependency>
	<!-- https://mvnrepository.com/artifact/io.cucumber/cucumber-core -->
	<dependency>
	    <groupId>io.cucumber</groupId>
	    <artifactId>cucumber-core</artifactId>
	    <version>7.17.0</version>
	</dependency>	
	<!-- https://mvnrepository.com/artifact/org.junit.jupiter/junit-jupiter-api -->
	<dependency>
	    <groupId>org.junit.jupiter</groupId>
	    <artifactId>junit-jupiter-api</artifactId>
	    <version>5.10.2</version>
	    <scope>test</scope>
	</dependency>
  </dependencies>
</project>

pom.xml file containing all the required dependencies for implementing the Cucumber framework for testing

As you can see, we make use of the Selenium WebDriver dependency, but also include additional dependencies such as the JUnit dependency for using the Assert class.

There are three additional dependencies related to the Cucumber framework:

Cucumber-Core
Cucumber-junit
Cucumber-java

Should you have any difficulty creating a separate Cucumber project of your own, you can include this pom.xml file into your project to help get you started!

Depending on the IDE you are using, you might find it helpful to install the Cucumber framework plug-in. If you are using the Eclipse IDE, you can install the Cucumber framework plug-in from the marketplace for free.

This tutorial assumes you are familiar with Java and setting up a Maven project on your own. For your convenience, you will find a .jar file located in /demos/Demo42_Selenium_WebDriver_Cucumber_Testing.

Before running any tests, we need to ensure the React.js web application is running.

To do this, ensure you have installed all the necessary dependencies by running npm install in /demos/Demo42_Selenium_WebDriver_Cucumber_Testing/webapp.

After that, simply run npm start to kickstart the client server on Port 3000.

As stated earlier, we need to run the test runner class as a JUnit test in order to run through all the different feature files and their step definitions.

This will depend on your IDE, but it is straight forward.

Simply navigate to the Runner class /selenium_test_2/src/test/java/options/TestRunner.java.

Select Run As > JUnit Test in the run options of your IDE (wherever that might be) and that is all there is to it!

You should see the running test results with each scenario step outlined with their corresponding pass/fail result.

Conclusion

We covered BDD implementation using the Cucumber Framework alongside Selenium WebDriver.

We created and organized feature files which defined different scenarios for testing each of the three different web components.

In addition, we dove deep into the different components of a feature file such as Scenario, Scenario Outline, Given-When-Then clauses, and so much more.

We implemented the different feature files in their own separate step definition files and saw how easy it was to bring it all together in a Runner class.

Different annotations related to the Cucumber framework were looked at such as the @Given, @When, @Then, @RunWith, and @CucumberOptions.

BDD promotes the reusability, maintainability, and a separation of concern of test code.

Building on what we learned in the previous two tutorials, there is no reason to not use the Cucumber framework for automation testing.

In the list below, you will find links to the GitHub repository used in this article and the official Cucumber framework docs:

As always, I hope you found this article helpful and look forward to more in the future.

Thank you!

Abdullah Muhammad

Blogger. Software Engineer. Designer.

Subscribe to the newsletter

Get new articles, code samples, and project updates delivered straight to your inbox.