Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Learn How to Automate Browser Testing With Selenium WebDriver — Part 1

DZone's Guide to

Learn How to Automate Browser Testing With Selenium WebDriver — Part 1

Learn about the basics of Selenium and how to automate web testing in various browsers.

· DevOps Zone ·
Free Resource

Discover how quick and easy it is to secure secrets, so you can get back to doing what you love. Try Conjur, a free open source security service for developers.

Introduction

Selenium is one of the most popular tools used for automating web applications. It is an open-source tool used for the execution of test scripts in a web application. It supports various programming languages such as Java, C#, PHP, JavaScript, Ruby, and Python.

Selenium is language-independent; Selenium is developed using Java and can be used with C#, Java, PHP, or JavaScript. Selenium can be executed on various operating systems, like Windows, Linux, and MacOS. It is also a platform-independent. That means the framework, developed using C# or Java, can be executed on different platforms or operating systems.

Selenium is a library which consists of classes, methods, and interfaces, which can be integrated with various programming languages mentioned above. Selenium is written using Java and is cross-platform.

Most top companies prefer Selenium rather than Quick Test Professional (QTP) and CodedUI, which are both licensed versions. Selenium supports automation with various browsers, such as Google Chrome, Edge Browser (Windows 10), Firefox Browser, Internet Explorer, and Safari. Each browser has its own driver for executing test scripts; for executing Selenium scripts on Chrome, we have Chrome drivers, etc.

The Internet Explorer (IE) driver and GoogleChrome driver support both 32-bit and 64-bit versions, which we can download and use based on our system requirements. Selenium WebDriver and Selenium Grid are the most commonly used tools in the IT industry for the development of testing products.

In earlier versions like Selenium 1.0 and 2.0, we were not required to set up Firefox drivers to execute scripts on the Firefox Browser. By default, Selenium has support for Firefox. In Selenium 3.0, vendors like Google, Apple, Microsoft, and Firefox have their own drivers to work with Selenium.

Selenium was developed as an internal project to test internal applications at ThoughtWorks,  developed in client-side technology like JavaScript by Jason Huggins. It is also called Selenium Core or Selenium IDE. Jason Huggins tested various internal applications and gave demos to various colleagues of his organization. They were excited about the success of the first version. Later, Paul Hammant joined this team and developed the other version of Selenium, Selenium RC. This tool became open-source to work with the different browsers and platforms.

Simon Stewart at ThoughtWorks developed an automation tool for the browser known as WebDriver, and later, they merged Selenium RC with WebDriver to create Selenium WebDriver (Selenium 2.0). Philippe Hanrigou at ThoughtWorks developed Selenium Grid in 2008. Selenium Grid is used for configuring a single hub and multiple nodes. The current hub is capable of running multiple test cases on the client machine as well as remote machines, which reduces time as well as resources.

Finally, Selenium 3.0 was developed in 2016 with new features. It is a combination of Selenium 2.0 and Selenium 1.0, which means it supports Selenium 2.0 features but it doesn’t have support for Selenium 1.0, i.e. Selenium Core.

When Selenium was in development, one of the most popular testing tools was called QTP (Quick Test Professional), developed by Mercury Interactive before it was acquired by HP. QTP was Selenium's competitor; they named their product based on the element Selenium. The chemical element Selenium is capable of poisoning or detoxifying Mercury, so the product was named Selenium.

In my previous articles on Selenium WebDriver, we have seen the execution of various HTML controls using Selenium C#. As we know, using Selenium we can automate anything we see on a web page or application, like an alert message, prompt message, message box, text box, drop-down buttons (single-click, double-click), hyperlink, checkbox, radio button, etc. We can even automate applications developed using Ext.js (Sencha applications) or KendoUI. In order to identify the controls which are available on the web page, we use various control properties like Id, Name, XPath, ClassName, TagName, CssSelector, RelativeXPath, AbsoluteXPath, etc.

In order to automate a control which is available on the web page, we use the above control properties like Id, Name, XPath, etc. We can directly give the control properties to identify the specific control and automate them. In some cases, there are no control properties except className, which includes a space, so if that is the case, we need to use either XPath or CssSelector.

For XPath, we need to click on F12 or Ctrl+Shift+I to inspect the element. Once we select the element, right-click on the particular element. A pop-up menu appears. Navigate to Copy--> Copy XPath. If there is any space in the control property, like ClassName, then we cannot access that control by using the ClassName property. Instead, we need to access that control by using a CssSelector control property. In order to use CssSelector, we need to replace spaces with a dot (.).

For example, for ClassName="name of the element on webpage" we need to use CssSelector like CssSelector=".name.of.the.element.on.webpage";.

In some applications, like Sencha or ExtJs applications, we cannot access a control with control properties like Id, Name, or XPath because when the page refreshes, the control properties change dynamically in runtime.

In a few cases, the control will have a unique class name property; due to this reason, we can either use CssSelector or Relative XPath. Using RelativeXPath, we need to create our own XPath by using two forward slashes like "//" or we can use a relative XPath extension which is provided by Google.

If we want to access a specific control, if it doesn't have any control properties and we cannot use Xpath as it changes every time dynamically, we need to access the control with its parent control, which has a unique control property.

In ExtJs or Sencha applications, not all controls will change properties dynamically, but there will be a few controls with unique control properties. If the control has a unique property like className, then we can use it directly, otherwise, we need to access the control with its parent control by taking a relative XPath. To take a relative XPath, we need to access it from its parent control with a unique control property like //div[@class="uniqueclassproperty/div/a/input[2]"].

If we want to access the second input control on a webpage, we need to use it as input [index value of input control] that is input[2].

Introduction to Selenium 3.0

In the earlier versions of Selenium like Selenium 2.0, we did not need to setup a Firefox driver as Selenium doesn’t have a Firefox driver. By default, Selenium supports the Firefox driver.

In this example, we don't require a Firefox driver's path. By default, Selenium 2.0 has built-in support for Firefox.

Using System;  
Using OpenQA.Selenium.Firefox;  
[TestMethod]  
public void LaunchFireFox() {  
    FireFoxDriver driver = new FireFoxDriver();  
    driver.Navigate().GoToUrl("http://www.google.com");  
    driver.Manage().Window.Maximize();  
    driver.Quit();  
} 

In Selenium's latest version, Selenium 3.0, we have a separate driver for Firefox (Gecko driver). You can download the Gecko driver from Selenium's website.

In this example, we need to download and save the driver in a folder path like D:/>FirefoxDrivers\Drivers\GeckDriver.exe.

Using System;  
Using OpenQA.Selenium.Firefox;  
[TestMethod]  
public void LaunchFirefox() {  
    FireFoxDriverService driver = new FireFoxDriverService("Path of the GeckoDriver(D:/>FirefoxDrivers\Drivers\)", "name of executable file(example geckodriver.exe)")  
    // code to Launch browser  
} 

The Firefox browser version is supported from 47+. If we want to work with the older versions (less than 47), there is no need to install Gecko driver, but working with 47 or higher either in Selenium 2.0 or 3.0 requires that Gecko driver is installed and configured.

You can download Gecko driver from this link.

In this version, we also have support for Microsoft’s Edge Browser, Microsoft’s own browser.

To work with Edge Browser, the client machine should be installed with Windows 10 Operating system. It should support Java greater than version 8 to run Java code (hub). Support for Safari (Apple OS) Browser is provided by Safari drivers (10.0 version+). More than 9+ versions of Internet Explorer are supported in Selenium 3.0. Now Selenium 3.0 has become a W3C (Worldwide Web Consortium) standard. Selenium 3.0 removed Selenium Core but supports Selenium RC indirectly through back-end WebDriver.

Pre-Requisites

  1. Java Runtime Environment (JRE) — latest version recommended.
  2. Selenium drivers like Chromedriver, IEDriver, Geckodriver, Operadriver, Safaridriver, etc.
  3. Browsers like Chrome, Firefox, Internet Explorer, Opera, etc.

For unit testing with Selenium WebDriver, we need to add a unit test project by navigating through File-->New-->Project and adding a unit testing project, like below.

Image title

Select "Unit Test project," give a name for the application, and click OK. Right-click on "references" and click on "Manage NuGet Packages."

Image title

Search for Selenium and click on "browse" to get all the packages related to Selenium. Add Selenium WebDriver and Selenium Support from NuGet Packages, like below.

Image title

This will be added to the solution explorer or Selenium Project within the references.

Image title

Once we have created the init testing project with the name "Selenium," the sample solution structure will look like this:

Image title

By default, it will come with [TestClass] and [TestMethod] attributes, which are part of Microsoft.VisualStudio.TestTools.UnitTesting dll. The [TestClass] attribute can be used with a Class, and [TestMethod] is used for unit testing methods.

If we want to perform unit testing using Selenium, then Mbunit.Framework dll supports various Attributes like [TestFixture], [Test], and [Parallelizable].

The above attributes are part of Mbunit.Framework.dll, which can be downloaded from "Manage NuGet Packages."

Gallio Bundle is the test runner of Selenium scripts. To execute our Selenium scripts, we can build the solution and provide the dll to Gallio, which in turn executes the scripts. Before executing the scripts on Gallio, it will identify the [TestFixture] and [Test] attributes.

While running unit test method, the test runner will identify the following attributes, like TestClass and TestMethod, if they are part of the coded UI.

To execute our script using Selenium, we need to replace the TestClass attribute with TestFixture and the TestMethod attribute with Test, because Selenium's test runner will identify and execute its scripts by identifying attributes like TestFixture and Test. 

Whenever we create a unit testing project, by default, Microsoft provides us with [TestMethod] and [TestClass] attributes, which are part of Microsoft.VisualStudio.TestTools.UnitTesting dll and help us execute CodedUI scripts.

To execute Selenium Scripts we write under the [Test] method, we need to build the solution and give the dll to Gallio bundle as part of Selenium execution. If we didn't replace the [TestMethod] or [TestClass] attributes with Mbunit.Framework attributes like [TestFixture] and [Test], Gallio could not identify the attributes which are part of Microsoft.VisualStudio.TestTools.UnitTesting dll, so it wouldn't execute the scripts and would throw an exception like "MethodNotFoundException."

If we want to execute with the Gallio bundle test runner, we need to replace the attributes to Mbunit.Framework attributes, like below:

using System;  
using Microsoft.VisualStudio.TestTools.UnitTesting;  
using MbUnit.Framework;  
namespace selenium {  
    [TestFixture]  
    public class UnitTest1 {  
        [Test]  
        public void TestMethod1() {  
            // Code for Selenium execution..  
        }  
    }  
}  

The above code contains the attributes of Mbunit.Framework, which can build the above solution and provide the dll to Gallio bundle. It will identify the attributes of Mbunit.Framework and execute the Selenium execution code with its test runner.

Selenium supports various browsers to execute its scripts. Each browser has its own driver; for example, if we want to execute Selenium scripts on the Chrome browser, we have ChromeDriver, which is part of OpenQA.Selenium.Chrome dll.

Image title

In the next article, we will see how to download Selenium drivers and we will see the execution of Selenium scripts. Thanks. I hope this helps you. 

Conjur is a free open source security service built by DevOps engineers. With integrations with all your favorite tools and an easy way to secure secrets, it's a no brainer. Come check it out!

Topics:
selenium ,selenium webdriver ,tutorial ,test automation ,web applications ,devops

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}