Cucumber WebDriver Basic Script Tutorial

In this tutorial we will finally cover Cucumber WebDriver. We will briefly talk about WebDriver and see how we can use Cucumber and WebDriver to talk to each other. We will see how Cucumber WebDriver can work in perfect synergy.

01 Cucumber WebDriver

The first question we have to ask ourselves is ‘what is WebDriver?’. WebDriver is a browser friendly rich API application which allows us to perform user actions on a web browser. What this means is that WebDriver allows a person to write code which in turn can open a web browser, perform actions on the browser and also check to see that certain conditions were satisfied. In all, WebDriver allows a programmer to easily write tests which can be executed against an actual browser.

02 WebDriver Setup Preparation

Before we start to see how WebDriver can be used with Cucumber we need to quickly download the selenium-server-standalone jar and place it in our ‘jars’ folder, inside the ‘cucumber_project’. Navigate to http://www.seleniumhq.org/download/ and download the jar. Once you download the jar place it in the ‘jars’ directory.

Also, we will use Firefox to run our tests although you can use other browsers if you wish. Firefox can be a little easier to use and setup as there is no need to download any additional software or plugins other than having Firefox installed on your machine. At the time of writing this blog I am using Firefox version 29.0 and selenium-server-standalone version 2.53.0.

03 Step Definition for Cucumber WebDriver

Before we write any code lets quickly revisit both of the Feature File and Java Step Definition Class from the previous tutorial.

Feature File:

Feature: To check that main tutorial course pages have loaded in TheTestRoom.com

Scenario: To check that the WebDriver Cucumber tutorial main page has loaded
Given I navigate to TheTestRoom.com
When I navigate to Cucumber Tutorial page
Then the page title should be visible

Step Definition Class:

package step_definition;

import cucumber.api.java.en.*;

public class myFirstStepDefinition {

        @Given( "^I navigate to TheTestRoom\\ .com$" )
        public void i_navigate_to_TheTestRoom_com() throws Throwable {
                System.out.println( "Going to TheTestRoom.com" );
        }
        @When( "^I navigate to Cucumber Tutorial page$" )
        public void i_navigate_to_Cucumber_Tutorial_page() throws Throwable {
                System.out.println( "Clicking on Cucumber Tutorial Page" );
        }
        @Then( "^the page title should be visible$" )
        public void the_page_title_should_be_visible() throws Throwable {
                System.out.println( "Checking page title" );
        }
}

Here we can see that the Feature File and Step Definition Class have matching steps. All that the Step Definition class is doing is that it is printing some statements. What we would like to do is convert our Step Definition class to instead run WebDriver.

Lets try to update the first Step Definition i.e. the ‘Given’ step to simply open a Firefox browser and close it. By implementing one step at a time we are effectively breaking down a big problem into smaller easier ones. Lets first update the imports statements. Include the following statements:

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

Now lets update the Given step:

@Given("^I navigate to TheTestRoom\\.com$")
public void i_navigate_to_TheTestRoom_com() throws
     System.out.println("Going to TheTestRoom.
     WebDriver driver = new FirefoxDriver();
     driver.quit();       
}

So what is happening above? Firstly we are creating a new instance of the WebDriver and calling it ‘driver’. We are then instantiating the ‘driver’ as a ‘Firefox’ browser. Since we instantiate it as a Firefox browser when we run our tests Firefox will be executed. If you wanted to use a different browser then this is where you would do it. Finally we call ‘quit’ to close the browser. Your Step Definition class should now look like this:

package step_definition;

import cucumber.api.java.en.*;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class myFirstStepDefinition {

    @Given("^I navigate to TheTestRoom\\.com$")
    public void i_navigate_to_TheTestRoom_com() throws Throwable {
        System.out.println("Going to TheTestRoom.com");
        WebDriver driver = new FirefoxDriver();
        driver.quit();        
    }
    @When("^I navigate to Cucumber Tutorial page$")
    public void i_navigate_to_Cucumber_Tutorial_page() throws Throwable {
        System.out.println("Clicking on Cucumber Tutorial Page");
    }
    @Then("^the page title should be visible$")
    public void the_page_title_should_be_visible() throws Throwable {
        System.out.println("Checking page title");
    }
}

Great, now lets try to run our new Step Definition class. So lets compile and run it:

javac -cp "jars/*;." step_definition/myFirstStepDefinition.java
java -cp "jars/*;." cucumber.api.cli.Main -p pretty -g step_definition/ features/

If everything has gone well you should now see a Firefox browser open as part of your first step, close and finally have the remaining two steps run. Congratulations as you have now just grapsed the absolute basics of running WebDriver via Cucumber. To finish off the first step we need to navigate to TheTestRoom.com. We can easily achieve this by using the ‘navigate’ method in WebDriver. Have a look below:

@Given("^I navigate to TheTestRoom\\.com$")
   public void i_navigate_to_TheTestRoom_com() throws Throwable {
   System.out.println("Going to TheTestRoom.com");
   WebDriver driver = new FirefoxDriver();
   driver.navigate().to("http://www.thetestroom.com");
}

Update your ‘Given’ step to the above and this will now navigate to TheTestRoom.com. Notice that we have removed the ‘quit’ method. This means when our test finishes the browser will still remain open but lets not worry about that now. We will discuss this ‘navigate’ method in more detail in a later blog but very briefly the ‘navigate’ method is used to tell WebDriver what URL to go to in its simplest form. With the first step now fully complete lets look at our second step definition.

04 Interacting with WebDriver

Now that we are able to open a Firefox web browser and navigate to TheTestRoom.com the next thing we should try to do (as per our Feature File scenario) is to actually go to the the Cucumber Tutorial web page. Now there are a number of different ways we can do this and the idea of interacting with web pages alone will require an entire blog post, for now lets just do something basic. If you open a web browser and navigate to TheTestRoom.com and right click on the Cucumber link and select inspect element then you should see a ‘Java Cucumber Tutorial’ inside an anchor tag.

It looks like the Cucumber Tutorial link is in fact an Anchor tag in the html. We can use this information from WebDriver to help locate the link on the page and click on it. Now as part of this Cucumber WebDriver tutorial I will be skipping a lot of important information but for now lets just try to see if its possible to find the ‘Cucumber Tutorial’ link via WebDriver and click on it. We know as a matter of fact that the text is an Anchor tag so we can use WebDriver’s anchor tag identifier to help locate the element. Once we locate it we can then click on it.

To identify the element and click on it, update your ‘When’ step to the following:

@When("^I navigate to Cucumber Tutorial page$")
   public void i_navigate_to_Cucumber_Tutorial_page() throws Throwable {
   System.out.println("Clicking on Cucumber Tutorial Page");
   driver.findElement(By.linkText("Java Cucumber Tutorial")).click();
}

Notice that in this step we are just using ‘driver’ as opposed to ‘WebDriver driver’. This is to ensure that we use the same instance of the driver as from the ‘Given’ step. This means we now need to go back to your ‘Given’ step and update it to use the same instance of the ‘driver’.

WebDriver driver;
@Given("^I navigate to TheTestRoom\\.com$")
    public void i_navigate_to_TheTestRoom_com() throws Throwable {
    System.out.println("Going to TheTestRoom.com");
    driver = new FirefoxDriver();
    driver.navigate().to("http://www.thetestroom.com");
}

We have now moved the ‘driver’ outside of the ‘Given’ method as this will allow other steps to access the same instance of the ‘driver’ without having null pointers thrown around.

If we now go back to our ‘When’ step we can now see that we are trying to find an element on the web page by link and passing in the actual text of the link. Assuming we find the element we will try to perform a ‘click’ operation on it. Finally we also have to add in an import statement for the ‘By’ class. Your current version of the Step Definition class should now look like this:

package step_definition;

import cucumber.api.java.en.*;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class myFirstStepDefinition {
    WebDriver driver;

    @Given("^I navigate to TheTestRoom\\.com$")
    public void i_navigate_to_TheTestRoom_com() throws Throwable {
        System.out.println("Going to TheTestRoom.com");
        driver = new FirefoxDriver();
        driver.navigate().to("http://www.thetestroom.com");
    }
    @When("^I navigate to Cucumber Tutorial page$")
    public void i_navigate_to_Cucumber_Tutorial_page() throws Throwable {
        System.out.println("Clicking on Cucumber Tutorial Page");
        driver.findElement(By.linkText("Java Cucumber Tutorial")).click();
    }
    @Then("^the page title should be visible$")
    public void the_page_title_should_be_visible() throws Throwable {
        System.out.println("Checking page title");
    }

}

To see this in action lets compile and run the code the Step Definition class as well as the Cucumber WebDriver Feature File. Assuming everything is OK you should now see a Firefox web browser open, navigate to TheTestRoom.com and then click on the Cucumber Tutorial web page. Awesome, we are almost there. Lets tackle the final step which is to check the page title.

05 Checking Page Title

The final thing to do is to check that the page title is present on the web page. Lets update our ‘Then’ step to printout the page title and then close the browser. Your ‘Then’ step should now look like this:

@Then("^the page title should be visible$")
public void the_page_title_should_be_visible() throws Throwable {
    System.out.println("Checking page title");
    System.out.println(driver.getTitle());
    driver.quit();
}

Now lets perform a final compile and run the Feature File. Your output should look like the following:

Feature: To check that main tutorial course pages have loaded in TheTestRoom.com
Going to TheTestRoom.com
Clicking on Cucumber Tutorial Page
Checking page title
Java Cucumber Tutorial - The Test Room

  Scenario: To check that the WebDriver Cucumber tutorial main page has loaded # myFirstFeature.feature:3
    Given I navigate to TheTestRoom.com                                         # myFirstStepDefinition.i_navigate_to_TheTestRoom_com()
    When I navigate to Cucumber Tutorial page                                   # myFirstStepDefinition.i_navigate_to_Cucumber_Tutorial_page()
    Then the page title should be visible                                       # myFirstStepDefinition.the_page_title_should_be_visible()

1 Scenarios (1 passed)
3 Steps (3 passed)
0m0.113s

We should now see a Firefox web browser open, navigate to the Cucumber Tutorial web page and then print out the title of the page on the console. Congratulations as you have now just finished writing your first completed Cucumber WebDriver test.

In this tutorial we have covered the concept of using Cucumber WebDriver and seeing how we can combine the power of Feature Files with the power of WebDriver. You should now have a good understanding of how easy and simple it can be to combine Cucumber WebDriver and use their synergy to produce very Feature File based tests.

This will now set us up very nicely for all future tutorials.

Follow the Video Tutorial on YouTube:

cucumber webdriver

Direct Video Link

Mo

I am a passionate tester, father, husband and gamer. I love to upload videos on my YouTube channel, write blogs about Software Testing and generally contribute back to the Software Testing world.

More Posts - Twitter - Facebook - Google Plus

Published by

Mo

I am a passionate tester, father, husband and gamer. I love to upload videos on my YouTube channel, write blogs about Software Testing and generally contribute back to the Software Testing world.

Leave a Reply