Selenium Tutorial - Learn Browser Automation with Selenium WebDriver
Selenium is a set of libraries that is used to emulate a user’s interactions with a browser.
Users write scripts using selenium libraries to simulate common user browser interactions, such as navigating to a page, clicking on a button and filling a form.
Selenium is commonly used in projects that build web front-end (UI) applications. It is used to automate scenarios that mimic a user’s interaction with the web application.
Install Selenium
To use Selenium WebDriver in a project, we first have to install Selenium Core and WebDriver Binaries.
We also have to set the path for each driver executable.
If you want to use Selenium with Java, then the easiest way to install Selenium is via a Maven dependency in your project pom.xml file:
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>3.141.59</version>
</dependency>
To run Selenium tests on Google Chrome or Firefox browser, you need to add the relevant dependency in your pom.xml file:
Google Chrome Browser
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-chrome-driver</artifactId>
<version>3.141.59</version>
</dependency>
Firefox Browser
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-firefox-driver</artifactId>
<version>3.141.59</version>
</dependency>
Install WebDriver Binaries and Set the Path
To execute Selenium tests on a particular browser, you need to have the relevant browser-specific WebDriver binaries installed and the correct path set.
Chrome To set the path to the chromium executable on a MacOS system, you can use:
$ export PATH="$PATH:/path/to/chromedriver"
You can also set the path programmatically, direct in the code:
System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");
Firefox - Geckodriver:
System.setProperty("webdriver.gecko.driver", "/path/to/geckodriver");
Edge:
System.setProperty("webdriver.edge.driver", "C:/path/to/MicrosoftWebDriver.exe");
Internet Explorer:
System.setProperty("webdriver.ie.driver", "C:/path/to/IEDriver.exe");
Instantiate Browser Driver
After installing Selenium, next is to instantiate a specific browser driver in order to run the UI tests.
Selenium tests are run against the user interface of an application and require a browser to work with. We can specify which browser we want to run our tests against and then instantiate the appropriate driver.
Chrome
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
WebDriver driver = new ChromeDriver();
Firefox
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.Firefox.FirefoxDriver;
WebDriver driver = new FirefoxDriver();
Edge
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.edge.EdgeDriver;
WebDriver driver = new EdgeDriver();
Internet Explorer
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
WebDriver driver = new InternetExplorerDriver();
Browser Navigation
Once we have an active WebDriver session and have launched a browser, the next thing we want to do is to navigate to a page and run tests.
Selenium WebDriver provides a number of useful methods to interact with the browser. We can perform navigation and get information about the current page.
To navigate to a URL we have two options:
//The short form
driver.get("https://devqa.io");
//The long form
driver.navigate().to("https://devqa.io");
Going Back
The Selenium back() method simulates clicking the browser’s back button:
driver.navigate().back();
Going Forward
The Selenium forward() method simulates clicking the browser’s forward button:
driver.navigate().forward();
Refreshing the Page
The Selenium refresh() method simulates clicking the browser’s refresh button:
driver.navigate().refresh();
Getting Current Page Information
Selenium also provides methods to get the current url, page title and page source.
Get Current URL
We can get the current page’s URL:
driver.getCurrentUrl();
Get Page Title
We can get the current page’s title:
driver.getTitle();
Get Page Source
We can get the current page’s source:
driver.getPageSource();
Closing and Quitting the Browser Session
To close the current browser window:
driver.close();
To quit the WebDriver session at the end of the testing use:
driver.quit();
The quit method will:
- Close all the windows associated with that WebDriver session
- Kill the browser process
- Kill the driver process
Selenium locators - How to Locate Web Elements
Before being able to interact with a web element, we need to locate the element on the html page.
One of the most important skills of a test automation engineer working with Selenium WebDriver is to be able to use appropriate methods to locate elements on a page.
For example, if we want to click a link, verify that a message is displayed or to click a button, we need to first locate the element.
Selenium WebDriver provides different methods to locate elements on a page.
A locator describes what you want to find on a page. In Java, we create a locator by using the By class.
For example, if we wanted to find an h1 heading element on a page, we would write
WebElement h1Element = driver.findElement(By.tagName("h1"));
Or, if we wanted to find all the paragraph elements on a page, we would use
List pElements = driver.findElements(By.tagName("p"));
By link text
This method locates elements by the exact text it displays. This method is normally the preferred locator for links on a page.
For example, suppose we have this link on a page:
<a href="#" id="change-password" class="btn" >Forgotten Password</a>
Then, the link can be located using:
driver.findElement(By.linkText("Forgotten Password"));
By partial link text
When we are not sure of the exact wording of the link text but want to find a link or links that contains a given text, we can use
driver.findElement(By.partialLinkText("Forgotten "));
or
driver.findElement(By.partialLinkText("Password"));
You should be careful when using findElement with this locator as there could be other elements that contain the same partial text, so this should not be used to locate a single element on its own. It is best to use it to locate a group of elements using the findElementsmethod.
By class attribute
This locates elements by the value of the class attribute. This can be used only for those elements having a class attribute, but it is not a good selector to use with the findElement method.
Using the same example above with the link, the “Forgotten Password” link has one CSS class: btn which can be used to locate it
<a id="change-password" class="btn" href="#">Forgotten Password</a>
Then, the link can be located using:
driver.findElement(By.className("btn"));
By id
By id, locates elements by the value of their id attribute. The link in the above example has an id that we can use:
<a id="change-password" class="btn" href="#">Forgotten Password</a>
Then, the link can be located using:
driver.findElement(By.id("change-password"));
If the id attribute is available, then it should be used as the first preferred choice.
By name
Locates elements by the value of their name attribute. Normally it can only be used to locate form elements built using: <input> , <button> , <select> , and <textarea> .
On a typical login page, you have input fields which could be like:
<input class="form-control" name="email" type="text" placeholder="Email" />
We can then locate the email field by the input name attribute
driver.findElement(By.name("email"));
By tag name
This locator finds elements by their HTML tag name. Since there are often many repeating uses of most tags, it is not a good idea to use this method to locate a single element.
A typical usage of locating an element by tag name is for locating the page’s heading, as there is only one of these:
<h1>Welcome to DevQA!</h1>
We can then locate the heading field by tag name:
driver.findElement(By.tagName("h1"));
By Css selectors
Locates elements via the driver’s underlying W3 CSS Selector engine. CSS selector locator is powerful as it can be used to locate any element on a page.
<a id="change-password" class="btn" href="./some-link">Forgotten Password</a>
We can then locate the email field by the input name attribute
driver.findElement(By.cssSelector("#change-password"));
Here, # represents id of the element. And the . notation represents the class attribute of an element.
For example:
driver.findElement(By.cssSelector(".btn"));
By XPath
XPath locators are the most complex selector to use. It requires knowledge in XPath query language, so if you’re not fluent in that query language, you will find it difficult to find elements using XPath queries.
Let’s look at an example usage of an XPath for this HTML:
<a id="change-password" href="#">Change Password</a>
We can then locate the email field by the input name attribute
driver.findElement(By.xpath("//a[@id='change-password']"));
Interact with Web Elements
Once we have located an element on the page, we can interact with it using a varity of methods that selenium provides.
Selenium WebDriver provides a number of ways to interact with web elements such as clicking submit buttons and entering text in input fields.
The WebElement class has a number of methods that we can use to interact with page elements. The most common ones are:
click()clear()sendKeys()submit()
Click
The click() method is used to click a web element such as a link or a button.
Example:
<a href="#" id="menu-toggle">Menu</a>
WebElement mToggle = driver.findElement(By.id("menu-toggle"));
mToggle.click();
Clear
The clear() method clears an input field’s value.
Example:
<input type="text" id="username" name="username">
WebElement username = driver.findElement(By.id("username"));
username.clear();
SendKeys
We use the sendKeys() method to enter characters into an input field box.
Example:
<input type="text" id="username" name="username">
WebElement username = driver.findElement(By.id("username"));
username.sendKeys("jondoe");
Example - Filling a form
Below is an example of how to use Selenium to fill a form
<form action="/submit_form.php">
<label for="username">username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Last name:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
WebElement username = driver.findElement(By.id("username"));
username.sendKeys("jondoe");
WebElement password = driver.findElement(By.id("password"));
password.sendKeys("secret");
WebElement submit = driver.findElement(By.cssSelector("input[type='submit']"));
submit.click();
Now that we have covered the basics of Selenium WebDriver, it’s time to build a framework.
Build a Selenium Framework
Learn how to build a selenium framework from scratch.
The first part of the tutorial provides a step-by-step on how to create a selenium WebDriver framework using Java, Maven and TestNG.
The second part focuses on structuring the selenium tests based on the famous Page Object Model.