>> Locators ( Locating web elements )

Locating web elements(objects) on a web page:

First of all you have to open the web page , select the desired element and right click your mouse , click the option “Inspect Element”. It opens the HTML of that page highlighting the HTML code for that element. You can identify/locate that element by using either of below properties, or combination of more than one properties from the list below: 

ID, name, class, tagname, link, xpath, CSS selector

ID:

You can locate element using id , ie, using attribute name as "id" and its value.

Syntax:

driver.findElement(By.id("attributeValue_of_id"))

Example:

Locate “login” button on the facebook.com as below:

WebElement idLocator = driver.findElement(By.id("u_0_2"));

locator = id

name:

You can locate element using name, ie, using attribute name as "name" and its value.

Syntax:

driver.findElement(By.name("attributeValue_of_name"))

Example:

Locate “Sign UP” button on the facebook.com as below:

WebElement nameLocator = driver.findElement(By.name("websubmit"));

Note: if more than one locators are having same name , then the first locator will be located.

locator = name

className:

You can locate element using className, ie, using attribute name as "className" and its value.

Syntax:

driver.findElement(By.className("attributeValue_of_class"))

Example:

Locate “Sport” tab on the bbc.com as below:

WebElement nameLocator = driver.findElement(By.className("orb-nav-sport"));

Note: The attributeName in HTML is "class" and we write the attribute as "className" in our code.

locator = className

tagName:

The purpose of tagName is slightly different. The nodes in HTML starts with different tagNames , such as: "input" (basically for inputs textboxes), "div" (document sections), "tr" (row in a table),"td" (cell in a table),  "table" (table), "a" (hyperlink), "select" (drop down list), headings h1, h2, etc., "iframe" (for frames), "option" (in dropdown list) , etc.

So, we use tagName locator to find out the number of the total tags present in the page or to locate elements with similar tag name.

Syntax:

driver.findElement(By.tagName("HTML_tag"))

Example:

Locate number of  "hyperlinks" present on the page facebook.com as below:

List linkElements = driver.findElements(By.tagName("a"));

Now, to find the total number of "hyperlinks" present is :

int totalNumber = linkElements.size();

System.out.println("Total number of link tags on the page is :"+ totalNumber);

Output:

Total number of link tags on the page is :52

different tagNames

link:

This can be used as linkText or partialLinkText to locate element.

linkText, example:

To locate and click the "Messanger" link on facebook.com page:

Open the facebook.com page

Right click the "Messanger" link and click "Inspect" , you see the respective HTML for "Messanger".

WebElement linkLocator = driver.findElement(By.linkText("Messenger"));

linkLocator.click();


After executing this code, opens facebook messanger page.

locator = linkText or partialLinkText

partialLinkText , example:

To locate and click the "Messanger" link, you can use the full linkText or partial linkText.

WebElement linkLocator = driver.findElement(By.partialLinkText("Messenger"));

Or

WebElement linkLocator = driver.findElement(By.partialLinkText("Mess"));

Or

WebElement linkLocator = driver.findElement(By.partialLinkText("ger"));

linkLocator.click();

After executing this code, opens facebook messanger page.

xpath:

xpath is a very powerful locator . And can be used in different ways. Please click below link to know about xpath in detail.

Click here to go to xpath

CSS Selector:

CSS selector is another powerful way of locating elements on a web page. It is similar to xpath but faster and powerful than xpath.

Syntax:

driver.findElement(By.cssSelector(cssSelector));

Using attribute name and/or attribute value:

For example: To locate the User id input text box in facebook.com page:

Using xpath , it would be :

WebElement uIDInputBox = driver.findElement(By.xpath("//input[@id=’email’]"));

Using CSS Selector, it would be :

WebElement uIDInputBox = driver.findElement(By.cssSelector("input[id=email]"));

Or

WebElement linkLocator = driver.findElement(By.cssSelector("#email"));

Or

WebElement linkLocator = driver.findElement(By.cssSelector("input#email"));

locator - CSS Selector

Using “contains”:

For example: To locate the User id input text box in facebook.com page:

Using xpath , it would be :

WebElement uIDInputBox = driver.findElement(By.xpath("//input[contains(@id,'ema')]"));

Using CSS Selector, it would be :

WebElement linkLocator = driver.findElement(By.cssSelector("input[id*=ema]"));

locator - CSS Selector