How to develop your first Selenium WebDriver Test Automation Script

Manual Test Case Design

Let's build a simple manual test case before we can automate it.

Web Application: Netflix

Test Scenario: Verify that when a user clicks "Try it Now" button without entering a valid email address, an appropriate warning message is prompted.

Test Case:
1. Open a browser
2. Navigate to the website
3. Click "Try it Now" button. Expected result: an appropriate warning message is prompted.
4. Close the browser

Now, let's look at how to translate this manual test case into an automated script using Selenium WebDriver. Read on..

Selenium is an open source software / a framework for testing web applications.

As per Selenium Dev, "Selenium automates browsers. That's it! What you do with that power is entirely up to you." So, it’s up to us to make the best out of Selenium. Many companies in the world have adopted Selenium for their browser-based testing as Selenium supports multiple browsers such as Firefox, Chrome, IE, Safari etc.

Selenium is a suite of automation tools. It comprises of Selenium IDE, Selenium RC, Selenium Webdriver, and Selenium Grid. Selenium RC is officially deprecated.

 

1. Selenium IDE – is a Chrome and Firefox add-on. This will do simple record-and-playback of user interactions with the browsers.

 

 

2. Selenium WebDriver – used to create robust, browser-based regression automation tests.

 

 

3. Selenium Grid – is used for distributing and running tests on several machines from a central point. Hence making it easy to run the tests in parallel against various combination of browsers & OS.

 

Selenium WebDriver is extensively used in the Testing Industry. Thus, we will particularly focus on it to develop your first Selenium WebDriver Test Automation Script.

Apparently, Selenium HQ is now rebranded as Selenium Dev. Find the Selenium documentation here.

 

Before we look into "What do you need before automating a Test Script?" from a test automation environment set-up perspective and even before we crack on with "how to develop your first Selenium WebDriver Test Automation Script", let's quickly look into the mechanics of Selenium WebDriver.

There are 3 key components essentially as part of the overall WebDriver architecture. You could download the 3 Bs - Browsers, Binaries and Bindings from the links below.
1. Browsers - Chrome, Firefox, IE
2. Binaries – exe (Chrome, Gecko, IE)
3. Bindings library - JAR

And we would need a Testing framework like Junit or TestNG to run the auto script.

When an automated test script is executed using Selenium WebDriver, the following actions are accomplished internally.

• For each Selenium command, WebDriver bindings generate an HTTP request
• The request is sent to the binaries that is the browser driver through HTTP server.
• HTTP Server performs actions on the browser.
• Browser responds with an execution status which is sent back to HTTP Server which is subsequently sent back to Selenium WebDriver.

Selenium WebDriver Architecture:

Selenium WebDriver accepts commands (sent via a Client API) and sends them to a browser.
This is implemented through a browser-specific browser driver, which sends commands to a browser and retrieves results. Most browser drivers actually launch and access a browser application (such as Firefox, Google Chrome, Internet Explorer, etc).

So, the communication is two way: WebDriver passes commands to the browser through the driver, and receives information back via the same route.

Technically, WebDriver uses JSON as a medium to communicate between client bindings libraries (Java, C# and so on) and binaries (Firefox Driver, Chrome Driver & IE Driver).

Guidelines for setting up Selenium WebDriver components - drivers for various browsers.

 

Based on the video below -

• Include the language bindings libraries for JAVA.
• Install Chrome browser (if you do not have it on your PC)
• In addition, include WebDriver binary for Chrome browser we want to automate and run test on.

An IDE

First and foremost, you will have to setup Eclipse IDE. Watch the video below covered as part of Java setup and follow the instructions.

A Programming Language

Secondly, the key component required for test automation is a programming language, such as, Java, Python, C#, JavaScript, etc.
Java is the most common programming language used for test automation. Also, given that Java is free and open source, let's use Java to develop your first Selenium WebDriver Test Automation Script.

Setup Java/JDK

Set up JDK and configure Java by following the instructions in the video.

 

 

Learn the essential Fundamentals of Java for Test Automation, before moving onto the next component.

Setup Selenium WebDriver

• Include the language bindings libraries for JAVA.
• Install Chrome browser
• In addition, include WebDriver binaries for the Chrome browser we want to automate and run test on.
  The above pointers are explained in detail in the subsequent sections, read on..

Testing Framework

Configure a test framework - TestNG or Junit.  This is necessary for running automated tests, covered in detail in "How to run Selenium Automation test script?" section.

Set up TestNG testing framework by following the Instructions in the video. This covers - Installation of TestNG framework as a Plugin (on Eclipse), running TestNG Tests, TestNG Test Suite and Build.xml for TestNG. Besides, although not required for this exercise, this also covers Running TestNG Test using Ant and generation of Reports.

 

 

Setup Maven

Maven is a build automation tool used primarily for Java projects. We will use this for project and dependencies management.

Set up Maven with TestNG testing framework based on the video. This includes Creation of Maven Project, Maven Dependencies (for TestNG & Selenium), MVN Repository. Additionally, although not required for this exercise, video explains as how to run Maven tests using TestNG framework.

 

You can create a Maven project for Selenium Automation Testing using Eclipse IDE. This was explained earlier as part of Maven setup.

Installation of Selenium libraries for Java can be done using Maven. Add the selenium-java dependency in your project pom.xml and save the file. Likewise for TestNG dependency. JARs would be downloaded to the repository.

Your POM xml file should include the Maven dependencies like so -

(Note: at the time of creating this blog, stable version for Selenium WebDriver was 3.11.0)

So we had built a simple manual test case before.

Web Application: Netflix

Test Scenario: Verify that when a user clicks "Try it Now" button without entering a valid email address, an appropriate warning message is prompted.

Test Case:
1. Open a browser
2. Navigate to the website
3. Click "Try it Now" button. Expected result: an appropriate warning message is prompted.
4. Close the browser

Let's translate this manual test case into an automated script using Selenium WebDriver commands. Most of the commands used in Selenium WebDriver are easy to implement.

Launch a browser:

Once the project has been created in Eclipse IDE, create a new Java class.

Include this line of code in order to set the Path to the executable binary.

System.setProperty("webdriver.chrome.driver", ".\\driver\\Chromdriver.exe");

Then, use the following WebDriver command

WebDriver driver = new ChromeDriver();

So this would launch Chrome browser as per the mechanics explained earlier!

Navigate to a website:

WebDriver Interface is the main interface to use for testing, which represents an idealised web browser. The methods in this interface fall into these key categories:
Control of the browser itself
Selection of WebElements

Copy this line of code to navigate to the website.

driver.get(“https://www.netflix.com/”);

And the follolwing sets the amount of time to wait for a page load to complete before throwing an error.

driver.manage().timeouts().pageLoadTimeout(5, TimeUnit.SECONDS);

And finally once the test has been run, we have to close the browser.

driver.close();

So these commands are sent across as HTTP requests to the binaries (drivers) and in turn the commands are fired across to the actual browser. HTTP verbs are used – POST, GET, etc. The WebDriver protocol is organised into commands. Each HTTP request with a method and template defined in this specification represents a single command, and therefore each command produces a single HTTP response.

Apparently, from the above test case, we have automated 3 test steps 1, 2 and 4. So, how do we automate Step 3? Read on..

Interact with the Web Elements:

Firstly, we will have to interact with web elements like button, link, etc.  We shall use WebElement Interface, in order to perform an action on any web element. For example, click a button or a link, enter data into a test box, select a value from a drop down list, so on.

WebElement – is an interface and it represents an HTML element. Generally, all operations to do with interacting with a page will be performed through this interface. We can use findElement method to Find the first WebElement and returns first matching element.

Locators - There are various locators, we will use xpath as the locator strategy.
In layman terms, this represent the address of a WebElement.

For example, 'Try It Now' button on Netflix homepage is represented as follows

//*[text()='TRY IT NOW'])[1]

As we would like to verify that the warning message is shown to the user if the user hits try it bow button without entering email address, we need a locator for this Web element too.

Xpath for this element is -

//*[@class='inputError']

Waits

Selenium is superfast while executing the commands, we should instruct it to slow down a bit, until an element on a page has loaded completely. And to achieve this, we will go for WebDriverWait.

WebDriverWait – another interface extensively used to avoid intermittent issues that arise from use of Selenium and WebDriver are connected to race conditions that occur between the browser and the user’s instructions.

WebDriverWait(WebDriver driver, long timeOutInSeconds)

Parameters:
driver - The WebDriver instance to pass to the expected conditions
timeOutInSeconds - The timeout in seconds when an expectation is called

Explicit waits are available to Selenium clients which will allow our code to halt program execution, until the condition you pass it resolves. The condition is called with a certain frequency until the timeout of the wait is elapsed. This means that for as long as the condition returns a false value, it will keep trying and waiting.

WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement element = wait
.until(ExpectedConditions.elementToBeClickable(By.xpath("(//*[text()='TRY IT NOW'])[1]")));

In this case we will wait until the 'Try it now' button is clickable, before actually clicking it - hence avoiding intermittent "NoSuchElementException" issue. Refer 'Handling Exceptions' section below for more details.

Now can click the Try it now' button, like so -

element.click();

Assertions

Use TestNG for including Assertions – they are basically validations in manual testing world – comparing expected and actual, or checking a condition is true/false.
In this exaple, we could check if the web element for 'warning message' is displayed or not on the web page as part of the automated script.

isDisplayed() method - checks if the element is displayed or not.
Returns: boolean - whether or not the element is displayed.

boolean displayed = driver.findElement(By.xpath("//*[@class='inputError']")).isDisplayed();
Assert.assertTrue(displayed, "Not displayed");

Test would pass if the element is displayed, if not the test fails.

Using Assertions, you can compare the expected and actual warning text message too.

Handling Exceptions

What is an Exception?
Exceptions are events due to which java program ends abruptly without giving expected output. Java provides a framework where a user can handle exceptions.

These are some of the common Selenium WebDriver exceptions encountered while automating a test:

NoSuchElementException - Thrown when element could not be found. Possble causes: Check your selector used; Element may not yet be on the screen at the time of the find operation, (webpage is still loading)

StaleElementReferenceException - Thrown when a reference to an element is now “stale”. Possible cause: You are no longer on the same page, or the page may have refreshed since the element was located

TimeoutException - Thrown when a command does not complete in enough time. Possible cause: Website performance. Sometimes the web page might not load completely before the next command is perfofmed as per test script. If WebDriver tries to find an element in the webpage before the page completely loads, then exception NoSuchElementException is thrown. To avoid this exception, Waits (as discussed before) commands are included. However, if the element do not load even after the wait, TimeoutException exception is thrown. To avoid this, we could manually check the average time for a page to load and adjust the wait. That said, JavaScriptExecutor is an efficient solution - where we could check the document.readyState is 'complete', meaning the webpage has completely loaded, before interacting with webelements.

The process of handling the exceptions is called as Exception Handling.

Try-catch: Use a combination of try and catch keywords inside a test method. Try indicates the start of the block, and Catch is placed at the end of the try block to handle the exception. The following code represents the syntax of Try/Catch block –

try
   {
     // Some code
   }
catch(Exception e)
  {
     // Code for Handling the exception
  }

For our Test case,

	@Test
	public void testWarningMessageDisplayed() {
		try {
			// Get to URL
			driver.get("https://www.netflix.com/");
			driver.manage().timeouts().pageLoadTimeout(5, TimeUnit.SECONDS);

			WebDriverWait wait = new WebDriverWait(driver, 10);
			WebElement tryNowButton = wait
					.until(ExpectedConditions.elementToBeClickable(By.xpath("(//*[text()='TRY IT NOW'])[1]")));

			// Click the Try it now button
			tryNowButton.click();
			Thread.sleep(2000L);

			// Validate warning message is displayed
			boolean displayed = driver.findElement(By.xpath("//*[@class='inputError']")).isDisplayed();
			Assert.assertTrue(displayed, "Not displayed");
			System.out.println("Test passed");
		} catch (Exception e) {
			System.out.println("Test failed");
			Assert.fail(e.getMessage());
		}
	}

Finally, you have developed your first Selenium WebDriver Test Automation Script!

There are many ways of running a Selenium auto script:
1. Using Eclipse IDE with the help of a Testing framework like TestNG, Junit .
2. Via command line
3. Using a Build tool like Maven
4. Through Jenkins
5. Headless as well – that is without opening the browser

We would use the first method for this test case execution - TestNG which is a Testing framework used for running automated tests.

Install TestNG plugin for Eclipse.

TestNG Annotations
Are tags that can be added to code and gives information about test methods and methods going to run before & after test methods

@BeforeTest – causes a method to be run before each Test method.
@Test – causes a method to be run as a test case.
@AfterTest – causes a method to be run after the Test method.

public class TestNGTest {
 @BeforeTest
 public void beforeTest() {
 }

 @Test
 public void test() {
 }

 @AfterTest
 public void afterTest() {
 }
}

TestNG Assertions
Are used for validation purpose as used in our test case before.

Assert.assertTrue(condition);
Assert.assertEquals(expected, actual);
Assert.fail(message);

Our Manual Test Case completely transformed into Test Automation Script (using Selenium WebDriver, Java & TestNG), looks so -

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class Netflix {
	WebDriver driver;

	@BeforeTest
	public void beforeTest() throws IOException {
		System.setProperty("webdriver.chrome.driver", ".\\driver\\Chromedriver.exe");
		driver = new ChromeDriver();
	}

	@Test
	public void testWarningMessageDisplayed() {
		try {
			// Get to URL
			driver.get("https://www.netflix.com/");
			driver.manage().timeouts().pageLoadTimeout(5, TimeUnit.SECONDS);

			WebDriverWait wait = new WebDriverWait(driver, 10);
			WebElement tryNowButton = wait
					.until(ExpectedConditions.elementToBeClickable(By.xpath("(//*[text()='TRY IT NOW'])[1]")));

			// Click the Try it now button
			tryNowButton.click();
			Thread.sleep(2000L);

			// Validate warning message is displayed
			boolean displayed = driver.findElement(By.xpath("//*[@class='inputError']")).isDisplayed();
			Assert.assertTrue(displayed, "Not displayed");
			System.out.println("Test passed");
		} catch (Exception e) {
			System.out.println("Test failed");
			Assert.fail(e.getMessage());
		}
	}

	@AfterTest
	public void afterTest() {
		driver.close();
	}
}

Run this test script within Eclipse IDE using TestNG plugin for eclipse.
Right click on the Java class (within Eclipse IDE), and from the context menu, select Run As > TestNG Test option.

Test Result on the Eclipse Console:

[TestNG] Running:
  C:\Users\\AppData\Local\Temp\testng-eclipse-1487057191\testng-customsuite.xml

Starting ChromeDriver 79.0.3945.36 (3582db32b33893869b8c1339e8f4d9ed1816f143-refs/branch-heads/[email protected]{#614}) on port 39897
Only local connections are allowed.
Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
 org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: W3C
Test passed
PASSED: testWarningMessageDisplayed

===============================================
    Default test
    Tests run: 1, Failures: 0, Skips: 0
===============================================

In real world, the fundamental idea behind developing an individual test case is the same as explained before. However, the test automation scripts are organised and built within a formal Test Automation Framework. This gives us a Platform for test case development, execution and reporting. Test Automation frameworks helps accomplish: code reusability, maximise test coverage and reduce maintenance cost, to name a few.

We will use various design patterns and Test Automation Frameworks in real world like:

• Page object models based Framework
• Behaviour Driven Development Framework. Refer our blog How to develop your first Cucumber BDD and Selenium Automation Script
• Data driven and keywords driven framework

The above Test Automation Frameworks are covered extensively in our project-based, hands-on Automation Testing Training and Software Testing Internship.