Cucumber Selenium tutorial

How to test a website user interface using Cucumber and Selenium

Dependencies used

• selenium-jutils
• cucumber-jutils
• Selenium and Cucumber for java
• Lombok

How to run

Start Selenium Grid via docker-compose from src/test/resources/selenium:

docker-compose -f selenium-grid.yml up

Run tests with Maven and generate reports:

mvn clean verify -Plocal,html-report -Dtags=@ui -Dconcurrent=true -Dbrowser.type=chrome -Dthreads=4

Application

The test application is a Grocery web page:

Page object models

BasePage.java:

public abstract class BasePage {
    
    protected BasePage(WebDriver driver) {
        this.driver = driver;
        PageFactory.initElements(new FieldContextDecorator(new ElementContextLocatorFactory(driver, Duration.ofSeconds(10),
                Collections.singletonList(StaleElementReferenceException.class))), this);
    }

GroceryPage.java:

@ScenarioScoped
@Getter
public class GroceryPage extends BasePage {

    @FindBy(xpath = "//app-root//app-list")
    private GroceryListContext groceryListContext;

GroceryListContext.java:

public class GroceryListContext extends WebContext {

    @FindBy(xpath = ".//input[@type='text']")
    private WebElement groceryInput;

    @FindBy(xpath = ".//button[text()='Add']")
    private WebElement groceryAddButton;

    @FindBy(xpath = ".//ul/li")
    @Getter
    private List<Item> groceryItemList;

Cucumber step definitions

GroceryListSteps.java:

@ScenarioScoped
public class GroceryListSteps extends BaseScenario {

    @Inject
    private GroceryPage groceryPage;

    @When("Go to grocery list tab")
    public void goToGroceryListTab() {
        groceryPage.getGroceryListLink().click();
    }

    @When("Check grocery list size={}")
    public void checkGroceryListSize(int size) {
        assertEquals(size, groceryPage.getGroceryListContext().getGroceryItemList().size());
    }

    @When("Add grocery item with name={}")
    public void addGroceryItem(String name) {
        groceryPage.getGroceryListContext().addGroceryItem(name);
    }

Features

Grocery.feature:

@ui
@local @prod
@groceryList
Feature: Grocery List feature

  Scenario: Add grocery item
    * Go to grocery list tab
    * Check grocery list size=6
    * var itemName="Custom grocery item1"
    * Add grocery item with name=#[itemName]
    * Check grocery list size=7
    * Check grocery list contains item with name=#[itemName]

Cucumber Test Report