UI Testing with Cucumber BDD

Testing UI with Cucumber BDD

User Interface (UI) testing ensures that the visual aspects of a software application work as expected. Behavior Driven Development (BDD) allows teams to describe how software should behave using simple, domain-specific language. Combining Cucumber BDD with UI testing can make the process collaborative, readable, and maintainable. In this post, we'll explore how to set up UI testing using Cucumber, write effective scenarios, and implement step definitions.

1. Introduction to Cucumber and BDD

Cucumber is a popular tool for BDD that uses Gherkin language to describe software behavior in plain English. Gherkin scenarios are easy for non-technical stakeholders to understand, which fosters collaboration between developers, testers, and business analysts. For UI testing, Cucumber can be combined with Selenium WebDriver to automate interactions with web browsers.

2. Setting Up a Project for UI Testing with Cucumber

Step-by-Step Setup:

1. Install Required Tools:

   • Install Java Development Kit (JDK) and Maven (for Java projects).
   • Install IDEs like IntelliJ IDEA or Eclipse.
   • Install Cucumber and Selenium dependencies.

2. Configure Maven Project:

   • Create a new Maven project and add the following dependencies to your pom.xml file:

<dependencies>
    <!-- Cucumber Dependencies -->
    <dependency>
        <groupId>io.cucumber</groupId>
        <artifactId>cucumber-java</artifactId>
        <version>7.14.0</version>
    </dependency>
    <dependency>
        <groupId>io.cucumber</groupId>
        <artifactId>cucumber-junit</artifactId>
        <version>7.14.0</version>
    </dependency>
    <!-- Selenium WebDriver Dependency -->
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>4.14.0</version>
    </dependency>
</dependencies>

3. Create the Project Structure:
   • Organize the project with src/test/java for step definitions and src/test/resources for feature files.

3. Writing Gherkin Scenarios for UI Testing

Create a feature file named login.feature in the src/test/resources/features directory.

Feature: Login Functionality

  Scenario: Successful login with valid credentials
    Given the user is on the login page
    When the user enters valid credentials
    And clicks the login button
    Then the user should be redirected to the dashboard

  Scenario: Unsuccessful login with invalid credentials
    Given the user is on the login page
    When the user enters invalid credentials
    And clicks the login button
    Then an error message should be displayed

4. Implementing Step Definitions for UI Testing

Step definitions map Gherkin steps to Java methods. Create a Java class named LoginSteps.java under src/test/java/step_definitions.

package step_definitions;

import io.cucumber.java.en.*;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import static org.junit.Assert.*;

public class LoginSteps {
    WebDriver driver = new ChromeDriver();

    @Given("the user is on the login page")
    public void user_is_on_login_page() {
        driver.get("https://example.com/login");
    }

    @When("the user enters valid credentials")
    public void user_enters_valid_credentials() {
        driver.findElement(By.id("username")).sendKeys("validUser");
        driver.findElement(By.id("password")).sendKeys("validPass");
    }

    @When("the user enters invalid credentials")
    public void user_enters_invalid_credentials() {
        driver.findElement(By.id("username")).sendKeys("invalidUser");
        driver.findElement(By.id("password")).sendKeys("invalidPass");
    }

    @And("clicks the login button")
    public void clicks_login_button() {
        driver.findElement(By.id("loginButton")).click();
    }

    @Then("the user should be redirected to the dashboard")
    public void user_redirected_to_dashboard() {
        assertTrue(driver.getCurrentUrl().contains("/dashboard"));
        driver.quit();
    }

    @Then("an error message should be displayed")
    public void error_message_displayed() {
        assertTrue(driver.findElement(By.id("errorMessage")).isDisplayed());
        driver.quit();
    }
}

5. Running Cucumber Tests

To run the Cucumber tests, use a test runner class. Create a Java class named RunCucumberTest.java under src/test/java/runner.

package runner;

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

@RunWith(Cucumber.class)
@CucumberOptions(
        features = "src/test/resources/features",
        glue = "step_definitions",
        plugin = {"pretty", "html:target/cucumber-reports"}
)
public class RunCucumberTest {
}

Run the RunCucumberTest class to execute the scenarios. The results will be displayed in the console, and an HTML report will be generated in the target/cucumber-reports folder.

6. Advanced Cucumber Features for UI Testing

Using Hooks:

Hooks allow you to perform actions before and after each scenario.

import io.cucumber.java.After;
import io.cucumber.java.Before;

public class Hooks {

    WebDriver driver;

    @Before
    public void setUp() {
        driver = new ChromeDriver();
        driver.manage().window().maximize();
    }

    @After
    public void tearDown() {
        driver.quit();
    }
}

7. Best Practices for UI Testing with Cucumber BDD

• Organize Feature Files and Steps: Keep related scenarios together and use clear, descriptive names.
• Keep Steps DRY: Avoid repetitive code in step definitions by creating reusable methods.
• Use Page Object Model: For complex UI tests, use the Page Object Model (POM) to separate the test logic from UI interactions.

8. Integrating Cucumber with CI/CD Pipelines

To integrate Cucumber with CI/CD pipelines like Jenkins or GitHub Actions, configure the pipeline to run mvn test and archive the test reports generated in the target/cucumber-reports directory.

9. Conclusion

Testing UI with Cucumber BDD brings clarity and collaboration to the development process. Writing scenarios in plain English and using Selenium for UI interactions creates a comprehensive testing approach that is understandable for all stakeholders.

10. Further Reading and Resources

• Cucumber Documentation
• Selenium WebDriver Documentation

By following this guide, you should be able to set up UI testing with Cucumber, write effective Gherkin scenarios, implement robust step definitions, and run tests seamlessly.