- Selenium Tutorial — Learn Browser Automation with Selenium WebDriver
- Install Selenium
- Google Chrome Browser
- Firefox Browser
- Install WebDriver Binaries and Set the Path
- Instantiate Browser Driver
- Chrome
- Firefox
- Edge
- Internet Explorer
- Browser Navigation
- Going Back
- Going Forward
- Refreshing the Page
- Getting Current Page Information
- Get Current URL
- Get Page Title
- Get Page Source
- Closing and Quitting the Browser Session
- Selenium locators — How to Locate Web Elements
- By link text
- By partial link text
- By class attribute
- By id
- By name
- By tag name
- By Css selectors
- By XPath
- Interact with Web Elements
- Click
- Clear
- SendKeys
- Example — Filling a form
- Build a Selenium Framework
Selenium Tutorial — Learn Browser Automation with Selenium WebDriver
Last updated: 17 March 2020 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:
org.seleniumhq.selenium selenium-java 3.141.59
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
org.seleniumhq.selenium selenium-chrome-driver 3.141.59
Firefox Browser
org.seleniumhq.selenium selenium-firefox-driver 3.141.59
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"
System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");
System.setProperty("webdriver.gecko.driver", "/path/to/geckodriver");
System.setProperty("webdriver.edge.driver", "C:/path/to/MicrosoftWebDriver.exe");
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.
Note: Selenium tests are only used for UI automation and the tests run against a browser.
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
Going Forward
Refreshing the Page
Getting Current Page Information
Get Current URL
Get Page Title
Get Page Source
Closing and Quitting the Browser Session
- 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:
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 "));
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 findElements method.
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
Then, the link can be located using:
driver.findElement(By.className("btn"));
Note: The class attribute is used for styling pages, and so chances are that many elements are likely to have the same class.
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:
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: , , , and .
On a typical login page, you have input fields which could be like:
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:
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.
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.
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:
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
The click() method is used to click a web element such as a link or a button.
WebElement mToggle = driver.findElement(By.id("menu-toggle")); mToggle.click();
Clear
The clear() method clears an input field’s value.
Tip: It is recommended to use the .clear() method before entering text in an input field.
WebElement username = driver.findElement(By.id("username")); username.clear();
SendKeys
We use the sendKeys() method to enter characters into an input field box.
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
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.