_edited_edited.png)
Introduction
In this blog, i tried to explain locators in selenium and syntax with examples.Here i have taken our Numpy ninja website to locate and inspect all the elements and find the paths using all the locators in selenium.Hope you like this blog.
Selenium has become the most popular option for developers to run automation tests for web applications. The Selenium suite has excellent flexibility — it allows teams to run the tests on a local machine or the cloud, interfacing through many commonly used programming languages. While there are a set of challenges in Selenium, the flexibility that it provides makes it the best testing framework to adopt.
Locating elements in Selenium WebDriver is performed with the help of findElement() and findElements() methods provided by WebDriver and WebElement class.
findElement() returns a WebElement object based on a specified search criteria or ends up throwing an exception if it does not find any element matching the search criteria.
findElements() returns a list of WebElements matching the search criteria. If no elements are found, it returns an empty list.
There are various strategies to locate elements in a page. You can use the most appropriate one for your case. Selenium provides the following method to locate elements in a page
Here's a snapshot overview of top 8 locators in Selenium:
Identifier.
By ID: find_element_by_id.
By class name: find_element_by_class_name.
By name attribute: find_element_by_name.
By structure or Xpath: find_element_by_xpath.
By tagName: find_element_by_tag_name()
By link text: find_element_by_link_text.
By partial link text:find_element_by_partial_link_text.
By cssSelector
Locators Usage
Now let us understand the practical usage of each of the locator methods with the help of various websites.
Identifier
Identifier works with the id and name attributes of your html tags. Let’s consider the following example:
<html>
<body>
<form id="login">
<input name="username" type="text"/>
<input name="password" type="password"/>
<input name="submit" type="submit" value="Continue!"/>
</form>
</body>
</html>PROS:
This strategy doesn’t rely on the structure of the page and will work even if it changes.
CONS:
Easily matches several elements: try to name your username field as login
By ID: find_element_by_id.
Here i have taken our Numpy Ninja portal to find element using ID which is shown below
Syntax:
By home=By.id("comp-l19k7i030");
driver.findElement(home).click();
Here is another syntax to find the element by for text box
By FirstName=By.id("input_comp-l1c0ktzj1");driver.findElement(FirstName).sendkeys("Mickel");where,
driver ➨ Object reference variable of the WebDriver object. WebElement ➨ Return type of the findElement() method. By ➨ By is a class that extends java.lang.Object. It provides a mechanism that is used to locate elements within a document.
PROS:
Each id is supposed to be unique so no chance of matching several elements
CONS:
Works well only on elements with fixed ids and not generated ones
By class name: find_element_by_class_name.
Here an object is accessed with the help of Class Names. In this case, it is the Class name of the WebElement.
Syntax:
driver.findElement(By.className("foFAdY")).click();
By name attribute: find_element_by_name.
Name locator is the second safest and fastest locator to locate an element based on the value of “name” attribute on the web page. The name cannot be unique for each element at all times. If there are multiple elements with the same name on a web page then Selenium will always perform the action on the first matching element.
Username and Password fields are examples that can be identified with “name” attribute. The general syntax to use name locator is as follows: Like the Id strategy, but on the name attribute. You can also specify a filter to refine your locator. Currently, there are two filter types :
Syntax
By Phone =By.name("phone");
driver.findElement(Phone).sendKeys("2394889525");PROS:
Works well with fixed list of similar elements
CONS:
Difficult to use with data-bound lists
By structure or Xpath: find_element_by_xpath.
XPath stands for XML path language. It is a query language for selecting nodes from an XML document. XPath is based on the tree representation of XML documents and provides the ability to navigate around the tree by selecting nodes using a variety of criteria. XPath is the standard navigation tool for XML; and an HTML document is also an XML document (xHTML). XPath is used everywhere where there is XML.
Syntax
driver.findElement(By.xpath("/html/body/div/div/div[3]/div/header/div/div[2]/div[2]/div/div/div[2]/p/span/span/span/span/a"));PROS:
Allows very precise locators
CONS:
Slower than CSS
Relies on browser’s XPath implementation which is not always complete (especially on IE) and as such is not recommended for cross-browser testing
Types of XPath in Selenium
There are two types of XPath in Selenium. They are:
Absolute XPath
Relative XPath
1.Absolute Xpath
It is the easiest way to find the element but if any changes are made in the path of the element then this XPath gets failed. So, This is the main disadvantage of absolute XPath.
It begins with a single forward slash (/) which selects the element from the root HTML node. The example of an absolute XPath expression of the element is given below:
Here two syntax has been shown with one example.For the below element we can find element in two ways
Absolute XPath = /html/body/div/div/form/input
WebElement userName = driver.findElement(By.xpath("/html/body/div/div/form/input"));2.Relative XPath
It starts from the double forward slash(//) and selects the element from anywhere on the webpage.
It is the best practice to find an element through a relative XPath and helps us to reduce the chance of “element not found exception”.
With a relative XPath, we can locate an element directly irrespective of its location in the DOM. The example of relative XPath is given below:
Relative XPath = //input[@class='lY3Nwh']
WebElement username = driver.findElement(By.xpath("//input[@class='lY3Nwh']"));By tagName: find_element_by_tag_name()
The Tag Name of an element can be used to locate that particular element in the WebDriver. It is very easy to handle tables with the help of this method. Take a look at the following code.
Syntax
driver.find_element(By.TAG_NAME, 'pages-CSS')By link text: find_element_by_link_text.
This method helps to locate a link element with matching visible text.
driver.findElements(By.linkText("Numpy Ninja")).click();
This strategy is intended to select links only and selects the anchor element containing the specified text:
PROS:
Will only select anchor elements
Useful when testing navigation
CONS:
You have to know the text of the link before
By partial link text:find_element_by_partial_link_text.
This methods helps locate a link element with partial matching visible text.
driver.findElement(By.partialLinkText("Ninja")).click();By CSSSelector:find_element_by_cssSelector.
The CSS is used as a method to identify the webobject, however NOT all browsers support CSS identification.
By home=By.cssSelector("p.content");
driver.findElement(home).click();
pseudo-classes | pseudo-elements |
:nth-of-type | ::first-line |
:nth-last-of-type | ::first-letter |
:first-of-type | ::selection |
:last-of-type | ::before |
:only-of-type | ::after |
:visited | |
:hover | |
:active | |
:focus | |
:indeterminate | |
PROS:
Much faster than XPath
Widely used
Provides a good balance between structure and attributes
Allows for selection of elements by their surrounding context
CONS:
They tend to be more complex and require a steeper learning curve
Hope that this tutorial has covered almost all the important points related to locators in Selenium with examples. Keep in mind the following key points related to XPath locators.
Conclusion
A locator is a way to identify elements on a page. It is the argument passed to the Finding element methods.Selenium locators can be considered as the building block of any type of Selenium automation test script. The reason is simple – locators in Selenium WebDriver help you in performing the requisite interactions with the elements in the DOM.
I Hope you get some idea about these above topics and able to find paths hereafter.If you find helpful like this blog and give your valuable comments.
Comentários