How To Find Elements in Selenium WebDriver?

WebElements play a major role while testing an application. The first thing to do is to locate these elements on the web page. I’ll be covering various options on how to find elements in Selenium that help in automation testing and data loading activities. You can learn more about this from the Selenium certification course. 

Why do we need to Find Element or FindElements?

Selenium is used for automatic data loading and regression testing of a website. As part of this automation feature interaction with a web page requires the driver to locate the web element and either trigger a JavaScript event like-click, enter, select, etc or type in the field value.

Find Element command is used to uniquely identify a (one) web element within the web page. Whereas, Find Elements command is used to uniquely identify the list of web elements within the web page.

Difference between “FindElement” and “FindElements”

There are multiple ways to uniquely identify a web element/elements within the web page such as ID, Name, Class Name, Link Text, Partial Link Text, Tag Name and XPATH.

Locator Strategy/ Types of locators

 Locator Strategy can be one of the following types to find an element or FindElements –

• ID
• Name
• ClassName
• TagName
• Link Text/Partial Link Text
• CSS Selector
• XPATH Selector

Let us now try to see how each of these strategies can be used to find an element or find elements. First, we’ll see about finding the

Find by ID 

ID’s are unique for each element so it is a common way to locate elements using ID Locator. It is the most common fastest and safest way to detect an element. It is recommended for website developers to avoid using non-unique Ids or dynamically generated Ids however some MVC frameworks like – ADF can lead to pages with dynamically generated ids.

If any website has non-unique Ids or has dynamically generated ids then this strategy can’t be used to uniquely find an element, instead, it will return the first web element which matches the locator. How we can overcome such situations, will be explained in the XPATH/CSS selector strategy.

Syntax:

public class LocateByID
{
public static void main (String [] args)
{
// Open browser
WebDriver driver = new FirefoxDriver();
//instance of Chrome | Firefox | IE driver
driver.get(<url>);
// Open Application
WebElement elm = driver.findElement(By.id("pt1:_UIShome::icon"));
// will raise NoSuchElementException if not found
elm.click()
//e.g- click the element
}
} 

Now let’s understand how to find an element using a name.

Find by Name 

This method is similar to Find By Id except the driver will try to locate an element by “name” attribute instead of “id” attribute.

Syntax:

public class LocateByName
{
public static void main (String [] args)
{
// Open browser
WebDriver driver = new FirefoxDriver();
//instance of Chrome | Firefox | IE driver
driver.get(<url>);
// Open Application
WebElement elm = driver.findElement(By.name("name"));
// will raise NoSuchElementException if not found
elm.sendKeys("Hi");
//e.g - type Hi in the detected field
}
} 

Now let’s move ahead and understand how to find elements in Selenium using the className.

Find by ClassName

This method finds elements based on the value of the CLASS attribute. More applicable for locating multiple elements which has a similar css class defined against them.

Syntax:

driver.findElements(By.className(<locator_value>)) ;//for list of elements

or

driver.findElement(By.className(<locator_value>)) ;//single web element

public class LocateByClass {

public static void main (String [] args){

// Open browser

WebDriver driver = new FirefoxDriver();//instance of Chrome | Firefox | IE driver

driver.get(<url>);// Open Application

List<WebElement> links = driver.findElements(By.className("svg-bkgd01 xi8"));//return an empty list if elements not foun
// loop over the list and perform the logic of a single element
}
}

Now let’s understand how to find elements in Selenium using TagName.

Find by Tag Name

This method finds elements based on the HTML tag name of the element. This is not widely used and used as the last resort if the particular web element can’t be detected by Id/name/link/className/XPATH/CSS.

Syntax:

driver.findElement(By.tagName(<locator_value>)) ;//single web element

or

driver.findElements(By.tagName(<locator_value>)) ;//for list of elements

public class LocateByTagName{

public static void main (String [] args){

// Open browser

WebDriver driver = new FirefoxDriver();//instance of Chrome | Firefox | IE driver

driver.get(<url>);// Open Application

WebElement ul = driver.findElement(By.id(<id>));

List<WebElement> links = ul.findElements(By.tagName("li"));

...

}

}

This is about how to find an element using TagName. Let’s move ahead and take a look at how to find elements using LinkText

TextFind by Link Text/Partial Link

With this method, one can find elements of “a” tags (Link) with the link names or having matching partial link names. This strategy is only applicable in finding element(s) of type anchor tags which contain a text value.

Syntax

driver.findElement(By.linkText(<link_text>)) ;//single web element

or

driver.findElements(By.linkText(<link_text>)) ;//for list of elements

driver.findElement(By.partialLinkText(<link_text>)) ;//single web element

or

driver.findElements(By.partialLinkText(<link_text>)) ;//for list of elements

This is about how to find elements in Selenium using LinkText. Now let’s understand how to find elements in Selenium using CSS Selector.

Find by CSS Selector

For websites generating dynamic Ids like ADF based applications or websites which are built on latest javascript frameworks like – React js which may not generate any Ids or names can’t use locator by Id/Name strategy to find elements. Instead, we have to use either CSS selector or XPath selectors.

Choosing a CSS selector over XPath selector for the sake of performance is a myth now. One can choose a hybrid approach. For simple screens CSS selectors(forward only) is preferred over XPATH, however, for complex traversal (forward/backward and complex search conditions) XPATH is the only choice.

CSS selectors have native browser support, so on occasion basis, it can turn out to be faster than XPATH selector.

XPATHSelector

XPATH is more readable and the learning curve is less steep since it uses standard XML query syntaxes, however, CSS selectors though have simpler syntax support but are not standard like XPATH and other documentation support, unlike XPATH.

Following are some of the mainly used formats of CSS Selectors –

• Tag and
• ID
• Tag and Class
• Tag and Attribute
• Tag, Class, and Attribute
• Sub-String Matches
  • Starts With (^)
  • Ends With ($)
  • Contains (*)
• Child Elements
  • Direct Child
  •  Sub-child
  • nth-child

Refer below screenshot –

Tag with ID

css= tag # id

public class LocateByCSSSelector
{

    public static void main (String [] args)
{ 
    
             WebDriver driver = new FirefoxDriver();
//instance of Chrome | Firefox | IE driver 
             driver.get(<url>);
// Open Application

WebElement el = driver.findElement(By.cssSelector("input#pt1:r1:0:rt:1:r2:0:dynamicRegion1:1:AP1:inputText562::content"));

el.sendKeys("Location1");

}

}

Tag and class

 css  = tag.class

   public static void main (String [] args)
{ 
    
             WebDriver driver = new FirefoxDriver();
//instance of Chrome | Firefox | IE driver
 
             driver.get(<url>);
// Open Application

WebElement el = driver.findElement(By.cssSelector("input.x25"));

el.sendKeys("Location1");

   }

}

Tag and attribute

css = tag[attribute=value]

public class LocateByCSSSelector{
    public static void main (String [] args){     
             WebDriver driver = new FirefoxDriver();//instance of Chrome | Firefox | IE driver 
             driver.get(<url>);// Open Application
WebElement el = driver.findElement(By.cssSelector("input[name='pt1:r1:0:rt:1:r2:0:dynamicRegion1:1:AP1:inputText562']"));
el.sendKeys("Location1");
   }
}

Tag, class, and attribute

css = tag.class[attribute=value]

public class LocateByCSSSelector
{

    public static void main (String [] args)
{ 
    
             WebDriver driver = new FirefoxDriver();
//instance of Chrome | Firefox | IE driver 
             driver.get(<url>);
// Open Application

WebElement el = driver.findElement(By.cssSelector("input.x25[name='pt1:r1:0:rt:1:r2:0:dynamicRegion1:1:AP1:inputText562']"));
el.sendKeys("Location1");
   }

}

Substring matches

Starts with –

public class LocateByCSSSelector
{
public static void main (String [] args)
{
WebDriver driver = new FirefoxDriver(); //instance of Chrome | Firefox | IE driver
driver.get(<url>); // Open Application
WebElement el = driver.findElement(By.cssSelector("input[name^='pt1:r1:0:rt']"));
el.sendKeys("Location1");
}
} 

Ends with –

<span style="font-weight: 400">[attribute^=prefix of the string]</span>
public class LocateByCSSSelector
{

    public static void main (String [] args)
{ 
    
             WebDriver driver = new FirefoxDriver();
//instance of Chrome | Firefox | IE driver 
             driver.get(<url>);
// Open Application

WebElement el = driver.findElement(By.cssSelector("input[name$='1:AP1:inputText562']"));
el.sendKeys("Location1");

   }

}

Refer same example screenshot above.

Contains 

public class LocateByCSSSelector
{

    public static void main (String [] args)
{ 
    
             WebDriver driver = new FirefoxDriver();
//instance of Chrome | Firefox | IE driver 
             driver.get(<url>);// Open Application

WebElement el = driver.findElement(By.cssSelector("input[name*='AP1']"));

el.sendKeys("Location1");

   }

}

Alternately the above syntax can be written as below –

public class LocateByCSSSelector
{

    public static void main (String [] args)
{
//instance of Chrome | Firefox | IE driver 
    
             WebDriver driver = new FirefoxDriver();
driver.get(<url>);// Open Application

WebElement el = driver.findElement(By.cssSelector("input:contains('AP1')]"));

el.sendKeys("Location1");

   }

}

Locating child elements(direct child/sub child)

Syntax:

parentLocator>childLocator

public class LocateByCSSSelector
{
public static void main (String [] args)
{
WebDriver driver = new FirefoxDriver();//instance of Chrome | Firefox | IE driver
driver.get(<url>);// Open Application
WebElement el = driver.findElement(By.cssSelector(“div#grid_toplevl_container > div#groupNode_workforce_management”));
el.click();
}
}[/java]

• Sub child
• Same as before only the locator can be a direct child/sub child
• Nth child
• Using nth-of-type

For detecting “Female” from the above li dropdown

public class LocateByCSSSelector
{

    public static void main (String [] args)
{ 
    
             WebDriver driver = new FirefoxDriver();//instance of Chrome | Firefox | IE driver 
             driver.get(<url>);// Open Application

WebElement el = driver.findElement(By.cssSelector("ul#_FO... li:nth-of-type(2)"));
el.click();

   }

}

Alternatively, you can check out the Automation Engineer Course by Edureka and get certified!

Find by XPATH selector

In our test automation codes, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we can not find any of them in the DOM and also sometimes locators of some elements change dynamically in the DOM. In these kinds of situations, we need to use smart locators. These locators must be capable to locate complex and dynamically changing web elements.

Recently when I was working on automation of regression testing of Oracle Fusion SaaS screens, I was struggling to identify a methodology of locating web elements. The same version of SaaS instance across various environments was generating different Ids.XPATH selectors came to my rescue and I mostly used contains() option to locate the web elements.

There are also other tactics of writing XPATH selectors. These are briefly explained below –

Absolute and Relative XPath

//tag[@attribute='value']

public class LocateByXPATHSel
{

    public static void main (String [] args)
{ 
    
             WebDriver driver = new FirefoxDriver();//instance of Chrome | Firefox | IE driver 
             driver.get(<url>);// Open Application

WebElement el = driver.findElement(By.xpath("xpath=//button[@id='pt1:r1:0:r0:1:AP1:APb']")); // trying to   
                                                       locate a buttton

el.click();

   }

}

Using contains()

It is very handy XPath Selenium locator and sometimes it saves the life of a test automation engineer. When an attribute of an element is dynamic, then we can use contains() for the constant part of the web element but also you can use contains() in any condition when you need.

Fusion Instance#1

Fusion Instance#2

If we compare the same field it has 2 dynamically generated Ids –

//input[@id=’pt1:_FOr1:1:_FONSr2:0:MAnt2:1:pt1:pt_r1:0:pt1:SP1:NewPe1:0:pt_r1:0:r1:0:i1:0:it20::content’]

and

//input[@id=’_FOpt1:_FOr1:0:_FOSritemNode_workforce_management_new_person:0:MAnt2:1:pt1:pt_r1:0:pt1:SP1:NewPe1:0:pt_r1:0:r1:0:i1:0:it20::content’]

We need to identify the constant part of the dynamic web element in this case which is ” Mant2:1:pt1:pt_r1:0:pt1:SP1:NewPe1:0:pt_r1:0:r1:0:i1:0:it20::content” and create XPATH syntax as below:

xpath=//input[contains(@id, ‘Mant2:1:pt1:pt_r1:0:pt1:SP1:NewPe1:0:pt_r1:0:r1:0:i1:0:it20::content’)] so that the same selenium  recording works on both the instances.

public class LocateByXPATHSel{

public static void main (String [] args){

WebDriver driver = new FirefoxDriver();//instance of Chrome | Firefox | IE driver

driver.get(<url>);// Open Application

WebElement el = driver.findElement(By.xpath(“xpath=//input[contains(@id, ‘Mant2:1:pt1:pt_r1:0:pt1:SP1:NewPe1:0:pt_r1:0:r1:0:i1:0:it20::content’)] “));

el.sendKeys(“Johnson”);

}
}

[/java]

Starts-with

This method checks the starting text of an attribute. It is very handy to use when the attribute value changes dynamically but also you can use this method for non-changing attribute values. This comes handy when the prefix part of the id of the dynamic web element is constant.

Syntax:

//tag[starts-with(@attribute, ‘value‘)]

Example:

//input[starts-with(@id, ‘user’)]

Chained Declarations

We can chain multiple relative XPath declarations with “//” double slash to find an element location as shown below.

xpath=//div[@id=’pt1:_USSpgl5′]//a[@id=’pt1:_UIScmi4′]

Combining ‘and’ ‘or’ operators

Referring the same screenshot above we can write a condition as below –

xpath=//a[@id=’pt1:_UIScmi4′ or @class=’xnk xmi’]

xpath=//a[@id=’pt1:_UIScmi4′ and @class=’xnk xmi’]

Ancestor

We can use this option to find web elements with the help of the ancestor of a particular web element.

Following-sibling

Select the following siblings of the context node.

Example:

//span[@class=’xnu’]/ancestor::div[@id=’pt1:_USSpgl5′]/following-sibling::div

In the above example we are trying to access all menus under “Administration”.

Following

Starts to locate elements after the given parent node. It finds the element before the following statement and set as the top node and then starts to find all elements after that node.

Syntax:

//tagName[@attribute=value]//following::tagName

Example:

//div[@id=’xx’]//following::input

So basically the search will start from div whose id=’xx’ and search all elements with tagname =’input’ following the div tag.

Child

Selects all children elements of the current node.

To get all ‘li’ elements in the following scenario we will write the syntax as – //ul[@id=’_FOpt1:_FOr1:0:_FOSritemNode_workforce_management_new_person:0:MAnt2:1:pt1:pt_r1:1:pt1:SP1:Perso2:0:pt_r3:0:soc3::pop’]/child:li

Preceding

Select all nodes that come before the current node.

Syntax:

//tagName[@attribute=value]//preceeding::tagName

Locating elements in an array of elements

Example:

//div[@id=’pt1:r1:0:rt:1:r2:0:dynamicRegion1:0:AP1:findByContentItemQueryResultId:_ATp:ciTblR1::db ‘]/table/tbody/tr/td/div/table/tbody/tr/td[1]

We can access the element of an array using [index] position of the array.

Find out our Selenium Training in Top Cities/Countries

This more or less covers the various selectors and strategies used to locate an element on a webpage. I hope it helped you and added value to your knowledge.

Got a question for us? Please mention it in the comments and we will get back to you.