To interact with web elements, we need to identify and locate them. There are various element locating strategies to locate elements on a web page. In this article, we will see how to locate any element on the web application. There are two methods to locate web page elements –
- findElement – used to identify unique elements within a page.
- findElements – used to identify a list of web elements within a page.
Now let’s see the difference between these two methods –
Table of Contents
Difference between findElement and findElements
| findElement() | findElements() |
|---|---|
| It returns the very first web element if the web page contains multiple elements. | It returns a complete list of web elements that are located within the web page. |
| If the element is not found, it will throw NoSuchElementException | If the elements are not found, it will return the empty list. |
✅ Read the Previous Article: Selenium – Writing First Test Case
Element Locating Strategies
Selenium findElement() methods take a parameter as By object and it returns an object of web Element. By object provides various locator strategies which are given below –
- ID
- Name
- ClassName
- Tag Name
- Link Text
- Partial Link Text
- CSS Selector
- XPATH
Below is the syntax of the Selenium Find Element command –
WebElement elementName = driver.findElement( By.LocatorStrategy( "LocatorValue"));1 – Find by ID
ID is the fastest out of all locating strategies to locate any web element on a web page. It is uniquely defined for each element. By using the ID you can easily get unique elements. If the id contains a dynamic value then ID can not be used. Let’s See in an example –
I am taking the example of https://www.saucedemo.com/ and trying to find the web element for the username text field. However many options are available to locate, but we are looking for ID first –
As you can see, in the given screenshot the ID locator is present and we can easily use this as a locator strategy, and we can write the code for this –
WebElement input_username = driver.findElement(By.id("user-name"));If the element is not found on the web page, it will raise NoSuchElementException.
2 – Find by Name
It is very similar to the ID locator, we can simply use the name instead of the ID and can easily get the web element. The difference is that ID is uniquely identified in a whole web page, but the name may contain more than one value. For example, refer to the below screenshot –
The code is given below for using this strategy –
WebElement input_username = driver.findElement(By.name("user-name"));If the element is located, It returns the very first matching element otherwise it will raise NoSuchElementException.
3 – Find by ClassName
ClassName works similarly to Name. You can use any of them according to the presence on the web page. There is no separate rule for using Name or ClassName. if the elements are located, it returns the very first matching element otherwise it will raise NoSuchElementException. For example, refer to the below screenshot –
As you can see in the above screenshot, there are multiple elements with the same class, so if you are using className, it will return the first element only i.e. username. And if you want to locate the password using className then you need to use it with XPath or CSS Selector.
The code is given below for using this strategy –
WebElement element = driver.findElement(By.className("input_error"));If there are multiple values separate with space in the class attribute, then we can use any of them. So we can use either of those –
WebElement element = driver.findElement(By.className("input_error"));
WebElement input_username = driver.findElement(By.className("form_input"));4 – Find by Tag Name
It is not a frequently used locator strategy as a web page contains many tags with the same name. A tag is a part of the DOM structure of a web page. There are separate tags like input, button, anchor, etc. and each tag is associated with attributes and their values. So we used these attributes and values of a tag to locate the web element.
So this is the strategy that is not frequently used, so the question came when to use this to locate any element. Consider a scenario where there is no ID, class, or name present, then we can use a tag name to locate any element or another scenario can be where we need to grab all the same things from the web page like to find all the hyperlinks or to find all the headings.
Above is the sample DOM for hyperlinks, If we need to find all the links then we can write the code as –
List<WebElement> links = driver.findElements(By.tagName("a"));It will return the list of web elements of all anchor tags.
5 – Find by Link Text
It is used to locate the hyperlinks within the web page. It identifies with the help of anchor tags. It took the exact text of the link and identified the same. If there are multiple links on a web page with the same name then it will locate the very first anchor element. For example, please refer to the below code for the given screenshot-
WebElement link = driver.findElement(By.linkText("link A1"));6 – Find by Partial Link Text
It is similar to the Link Text and is used to lactate the hyperlinks on the web page. It is also identified using anchor tags. But the difference is that It took partial text or substring of any link text and identifies the first element. See the below example for the same above screenshot (Fig 5)–
WebElement link = driver.findElement(By.partialLinkText("A1"));7 – Find by CSS Selector
CSS selector provides a CSS style rule to identify the elements on a web page. We can easily use tags, attributes, and their values with CSS selectors and find the unique elements. There are different rules to identify elements using ID, class, attributes, and inner texts.
CSS Selector – Using ID
For ID, the syntax is – tagname#id
Tag – which contains an element that you want to locate.
# – the (Hash) sign that is used to locate the ID
ID – id attribute of that element.
CSS selector rule to identify the username text field element –
driver.findElement(By.cssSelector("input#user-name"));CSS Selector – Using Class
For Class, the syntax is – tagname.class
Tag – which contains an element that you want to locate.
. – the (Dot) sign that is used to locate the Class
Class – class attribute of that element.
CSS selector rule to identify the username text field element –
driver.findElement(By.cssSelector("input.form_input"));CSS Selector – Using Tag and Attributes
For Tag and Attribute, the syntax is – tagname[attribute=value]
Tag – which contains an element that you want to locate.
Attribute – that is associated with that element
Value – of that attribute.
CSS selector rule to identify the username text field element –
driver.findElement(By.cssSelector("input[data-test='username']"));CSS Selector – Text Matching
For Text matching, we can use different ways for their needs –
| Sign | Example | |
|---|---|---|
| Prefix | ^ | tagName[id^='prefix_value'] |
| Suffix | $ | tagName[id$='suffix_value'] |
| SubString | * | tagName[id*='subString'] |
| Exact Match | tagName[id='exact_value'] |
CSS Selector – Child Nodes or Nth-node
If the web page contains a child node like this –
Then we can write CSS rule like this –
driver.findElement(By.cssSelector("div#parent a"));If there are multiple children and we need to identify Nth Child –
Identify first-child –
driver.findElement(By.cssSelector("div#parent a:first-child"));Identify last-child –
driver.findElement(By.cssSelector("div#parent a:last-child"));Identify Nth child –
driver.findElement(By.cssSelector("div#parent a:nth-child(2)"));8 – Find by XPath
It is the strategy to identify the web element using the HTML Structure of a page. It allows a tester to navigate the complete XML or HTML documents and find one or multiple elements. XPath is the one of locating strategies, which is slow to find the element because it navigates through the complete structure. It starts with a double slash “//” which means starting from a relative path.
- Single Slash (/) – Used to create an absolute path.
- Double Slash (//) – Used to create with relative path.
We need to create Xpath for a fourth child then we can write like this –
driver.findElement(By.xpath("//a[@id='child-forth']"));We can use indexing to find the child of Xpath and indexing starts from 1 –
driver.findElement(By.xpath("(//a[@id='child'])[1]"));We can find elements using contains –
driver.findElement(By.xpath("//a[contains(@id,'forth')]"));We will see a detailed discussion about XPath in another article. Here we have covered a basic idea to locate elements using XPaths.
Conclusion
So before starting to write the test case, we need to identify the web elements to perform the actions on them. And We have learned how we can identify one or more elements from the web page by using any of the suitable locating strategies. We should use the ID, className, and Name strategy to locate unique elements if all are present, otherwise, we have multiple options like XPath and CSS Selector.
FAQs
1. What is the locator strategy?
Locator Strategy is a way to identify one or more specific elements on the web page.
2. What are the types of locating strategies?
There are 8 types of locating strategies in Selenium that are listed below –
- ID
- Name
- ClassName
- Tag Name
- Link Text
- Partial Link Text
- CSS Selector
- XPATH
3. Which locator strategy is slow to locate elements?
XPath is the slowest locating strategy in terms of performance and speed. It is so because it traverses the DOM structure to identify the element.
4. What is the difference between ‘/’ or ‘//’ in XPath?
Single slash (/) is used to create absolute XPath whereas Double slash (//) is used to create relative XPath.
You might Like
💖 If you like this article please make sure to Like, Comment, and Share it with your friends and colleagues.
Follow us on our social networks –