Unit Testing With Selenium Web Driver - Part One

Selenium was developed as an internal project to test internal applications at ThoughtWorks, which was 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 different colleagues. Additionally, they were excited about the success of the first version. Later, Paul Hammant joined his team and developed the other version of Selenium; i.e., (Selenium RC) then this tool became open-source to work with the different Browsers and different platforms.

Simon Stewart at ThoughtWorks developed an Automation tool for the browser known as Webdriver and later they merged these Selenium RC with Webdriver called Selenium Webdriver(Selenium 2.0). Philippe Hanrigou at ThoughtWorks developed Selenium Grid in 2008. Selenium Grid is used for configuring 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 the time as well as the resource.

Finally, Selenium 3.0 was developed this year with the new features. It is a combination of Selenium 2.0 + 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.

Please refer to my article, to learn more about Selenium 3.0.

• Introduction To Selenium 3.0

When Selenium was in development, one of the most popular testing tools was called QTP (Quick Test Professional) which was developed by "Mercury Interactive" before it was acquired by HP. QTP was Selenium's competitor, they have named their product based on the element selenium. As we know the chemical element term Selenium (Se) is capable of poisoning or detoxifying Mercury. so the term or the product was named as Selenium.

In my previous articles/blogs on Selenium web driver, we have seen the execution of various HTML controls using Selenium C#. As we know, using Selenium we can automate anything which we see on the web page or web application, like Alert message, prompt message, message box, textbox, dropdown buttons (single click, double click), hyperlink, checkbox, radio button etc. and we can even automate the applications developed using Ext.js(Sencha Applications) or KendoUI etc. 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-mentioned 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 or some scenarios, there are no control properties except className which includes a space in it, so if that is the case, then we need to use either XPath or CssSelector.

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

For Example

ClassName="name of the element on webpage" ; then, we need to use a CssSelector like
In some applications like Sencha or ExtJs Application, we cannot access a control with control properties like Id, Name, XPath etc. because when the page refreshes, the control properties change dynamically in runtime.

In a few cases or scenarios, the control will have a unique className property; due to this reason, we can either use CssSelector or Relative XPath. For 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 contain any control properties and we cannot give Xpath, as it changes every time dynamically, then we need to access the control with its parent control, which has a unique control property.

In ExtJs or sencha application, 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 by its parent control by taking relative XPath. For taking relative XPath, we need to access from its parent control whichever is having a unique control property like -
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].