Identifying Elements in Selenium – Using By

In the previous article, we discuss on the concept and difference between FindElement and FindElements. While FindElement returns the first  webElement matching the condition, FindElements return a list of Web Elements.

We can identify a web Element using the class Name, Id, css Selector, link Text, name, partial link Text, tag Name, or Xpath property. Let us discuss now what these properties are and how to extract these in an HTML Page. We can identify the DOM structure of the objects in page. In Firefox browser, we can install the firebug add-on to identify the properties of element.

In Internet explorer, Chrome, or Firefox, Press F12 which will open the developer toolbar. Installing Firebug or similar add-on in browser helps to identify the object’s property in a better way, so is recommended to install firebug add-on in Firefox to extract object information to be used to identify object properties in a better way.

Let us take a simple example of link for Gmail in the Google Page, to understand how we can use properties in selenium to uniquely identify the element in the Page.

Consider code as shown in below image. We are focusing on element link for Gmail.

For the element gmail in the Page, we have following information from the firebug. It is a link, so tagName of the object is “a”, classname of the object is “gb_g”, Id is “gma3”, href is https://mail.google.com/mail/?tab=wm. nad name is "tna";

Now to identify this element in the Page in Selenium using different by method is explained below: 

Using Id - Id attribute can be used to uniquely identify web element in the Page. Since Id is unique for a web element in the Page. If Id is provided for an object, we should use Id to identify the object uniquely.

So suppose we use Id to uniquely identify the web element, the syntax will be:

WebElement usr= driver.findElement(By.id("gma3"));

Using TagName – We usually use tagName to find list of elements in the Page. A common example includes finding number of link in the Page.

List<WebElement> logi = driver.findElements(By.tagName("a"));

System.out.println(logi.size());

      Using ClassName - The class attribute specifies the class of element defined. Several objects in the Page can have same class and is usually useful  o get a list of objects. 

E.g: there are five edit boxes in a form. Once we click on submit with invalid data in the forms. Five different error messages will be displayed, and is very much possible, all will have same class. Using ClassName and findelements, we can get a list of webelement and extract the error message using getText Method;

WebElement usr= driver.findElement(By.className("gb_g"));

In case of using findElement, first object identified by properties will be selected as webElement.

Name - Finds element /element (s) that match the name attribute supplied.

WebElement usr= driver.findElement(By.name("name"));

      linkText – Find element that matches the exact text of the link, used for element of type link only.

     WebElement usr= driver.findElement(By.linkText("gmail"));

   partialLinkText – Find element that matches the text partially of the link based on text provided, used for element of type link only.

     

     WebElement usr= driver.findElement(By.partiallinkText("gma"));

   cssSelector – As Per Wiki Definition,In CSS, selectors are used to declare which part of the markup a style applies to by matching tags and attributes in the markup itself. Based on location of objects, its property, e.g : Id or className or relative location in the Page, we can identify the element. We will discuss various scenario and syntax to identify the element using css.

In the current example, we can identify link Gmail using css in following ways.

WebElement usr= driver.findElement(By.cssSelector("a. gb_g")); Or

WebElement usr= driver.findElement(By.cssSelector("a#gma3")); Or

WebElement usr= driver.findElement(By.cssSelector("a#gma3.gb_g")); Or

WebElement usr= driver.findElement(By.cssSelector("a[name=tna"));

      Xpath – Xpath is a query language for selecting nodes from an XML document. XPath is rendered on most HTML Pages

WebElement usr= driver.findElement(By.xpath("//a"));

WebElement usr= driver.findElement((By.xpath("//a[@id='gma3']"));

WebElement usr= driver.findElement((By.xpath("//a[contains(@href, 'https://mail.google.com/mail/?tab=wm')]”));