Different Selenium Locators with Examples

Selenium webdriver uses locators to find the web elements or components on the web page. The list of locators that selenium uses is as follows.

1. Locating a Web Element By ID: The easiest and most efficient way to locate a web element on a web page is By ID. IDs should always be used first because they are the fastest locator.

Example 1:

Selenium script for the above code is:

driver.findElement(By.id("bottomads"));

Please note that ID is always preferred above other locators if provided in the source code together with ID.

2. Locating Web Element By Class Name: When there is no ID present for a web element we can locate the element by its className.

Example:

Selenium code for the above HTML code is:

driver.findElement (By.className (“r-iBiFruc0NH1M”));

3. Locating a Web Element By Name: The name property is the second most favored method to find the web element if there is no Id to use in the HTML code.

Example:

Selenium script for the above HTML code is:

driver.findElement(By.name("description"));

4. Locating a Web Element By Partial LinkText: PartialLinkText also works in the same manner as Link Text. To handle dynamic links we can use the Partial Link Text.

Example:

Selenium script for the above HTML code is:

driver.findElement (By.partilaLinkText (“Mail”));

PROS:  It is helpful for testing navigation and will choose any link elements if we provide partial text.

Note: Only hyperlinks can use Link Text and Partial Link Text locators; all other web page elements can use other locators.

5. Locating a Web Element By TagName: TagName can be used with a Group of elements such as Select and check-boxes or dropdowns.

Example:

Selenium script for the above HTML code is:

Select select = new Select(driver.findElement(By.tagName(“select”)));

select.selectByVisibleText(“Applets”);

Or  

Select.selectByValue(“Applets”);

6. Locating a Web Element By CSS Selector:  In the selenium webdriver software automation testing tool, CSS Locator is an additional element locator option in addition to ID or Name locators. "Cascading Style Sheets" is the full name of CSS, and it specifies how to display HTML components on web pages for software applications.

CSS locator Examples

a. Selenium CSS locator using Tag and any Attribute:

Below syntax will find the "input" tag node which contains the "type=search" attribute.

css=input[type=search] 

Below syntax will find the "input" tag node which contains the "id=searchInput" attribute.

css=input[id=searchInput] 

Below syntax will find the form containing the "input" tag node which contains the "id=searchInput" attribute.

css=form input[id=searchInput]   

Note: All above CSS path examples given above will locate the Search text box

b. Selenium CSS locator using Tag and ID attribute:

css=input#searchInput  //Here, the '#' sign is specially used for the "id" attribute only. It will find the "input" tag node which contains the "id=searchInput" attribute. This syntax will find Search text box.

c. Selenium CSS locator using Tag and class attribute:

css=input.formBtn  // Here, '.' is specially used for the "class" attribute only. It will find the "input" tag node which contains the "class=formBtn" attribute. This syntax will locate the Search button (go).

d.  Selenium CSS locator using tag, class, and any attribute:

css=input.formBtn[name=go]  //It will find the "input" tag node which contains the "class=formBtn" class and "name=go" attribute. This syntax will locate the Search button (go).

e. Tag and multiple Attribute CSS locator:

css=input[type=search][name=search] //It will find the "input" tag node which contains the "type=search" attribute and "name=search" attribute. This syntax will locate the Search text box.

f. CSS Locator using Sub-string matches(Start, end and containing text) in selenium:

css=input[id^='search']  //It will find an input node that contains the 'id' attribute starting with 'search' text. (Here, ^ describes the starting text).

css=input[id$='chInput']  //It will find an input node that contains an 'id' attribute starting with 'chInput' text. (Here, $ describes the ending text).

css=input[id*='archIn']  //  It will find an input node that contains the 'id' attribute containing 'archIn' text. (Here, * describes the containing text).

Note: All three CSS path examples given above will locate the Search text box on the page of the software web application.

g. CSS Element locator syntax using child Selectors:

css=div.search-container>form>fieldset>input[id=searchInput]  //  First it will find the div tag with "class = search-container" and then it will follow the remaining path to locate the child node. This syntax will locate the Search text box.

h. CSS Element locator syntax using adjacent selectors

css=input + input  //  It will locate the "input" node where another "input" node is present before it on the page. (for search text box).

css=input + select or css=input + input + select //  It will locate the "select" node, where the "input" node is present before it on the page(for language drop-down).

i. CSS Element locator using contains the keyword

css=strong: contains("English")  // It will look for the element containing the text "English" as a value on the page.

j. Locating a Web Element by XPATH: It is a locator and it is an expression. XPATH is the path of the element in the HTML tree.

Example:  

Selenium script for the above is:

{

WebDriver driver = new firefoxDriver();

driver.get(“http://www.ecanarys.com/”);

driver.findElement(By.tagName(“input”)).sendKeys(“Canarys”)

String xp=”/html/body/input[2]”;

driver.findElement(By.xpath(xp)).sendKeys(“1234”)

}

The forward slash "/" is used while writing the XPATH expression. The first "/" signifies the root, or start, of the HTML tree. Only the tagName of the current child element should be specified after every '/'. We can use the index by default in XPath. starting with one. Only if there is a duplicate sibling does the index change (same tagName under the same parent).

- If we do not supply an index, then all elements are matched, however in Selenium, it only acts on the first element.

- Firefox is used to check whether the XPATH expression is accurate. Installing it in Firefox is necessary.

There are different types of XPATHS.

i. Absolute XPATH: Absolute XPATH is the term used to describe writing the whole XPATH of an element beginning at the root.

Example: /html/body/div/input[1] Ã¨ Here it reads both div

ii. Relative XPATH: Since the absolute XPATH will be rather long, we can substitute '//' in place of '/' to shorten the XPATH expression. '//' stands for any child (descendants)

Example1: //div[1]/input[1]

 Example2: Derive all the links present on the web page =  //a

 Example3: Derive all the images present on the webpage =  //img

Note that "/" denotes an immediate child and "//" means any child. The primary difference between them is this. In contrast to the relative path, which starts with a double slash, absolute XPath uses a single slash.

iii. XPATH by Attribute: In the XPATH expression we can use the property value and the property name. Which is called XPATH by Attribute.

Syntax: //html tag[@propertyName=’propertyValue’]

Note:

1. XPATH expression will find hidden elements also.

2. Do not use an attribute if its value is empty (“   “) or Boolean (true/false).

3. We won’t go for XPATH if we have ID, Name, Class, and Link.

iv. XPATH by Text Function: If the attribute is duplicate or attribute is not present, in such cases we can identify the element using its text in order to do this we should use following syntax.

Syntax: //html tag[text()=’textvalue’]

v. XPATH by contains(): If there is space before and after the property value or text value then XPATH will not identify the element. To handle this scenarios we use contains function of XPATH.

Syntax: //html tag[contains(text(),’textvalue’)]

vi. Traversing in XPATH: In XPATH we can navigate from one node to another node which is called as Traversing. There are 2 types.

1. Forward Traversing: Forward traversing is the process of moving from a parent node to a child node in a network. Put a forward slash after the tagName of the immediate child to perform forward traversing.

Example:

XPATH navigating from table to subject,

//table[@id=’t1’]/tbody/tr[1]/td[1] 

XPATH navigating from table to Java,

//table[@id=’t1’]/tbody/tr[2]/td[1]

2. Backward Traversing: Backward traversing is the navigational process of moving from a child node to its parent node. We utilise a forward slash followed by a double dot to do this.

Example: XPATH navigating from subject to table,

//td[text()=’Subject’]/../../..

XPATH navigating from java to table,

//td[text()=Java]/../../..

Note: In Backward Traversing, we do not use index