Testing With Selenium WebDriver (68 Blogs) Become a Certified Professional
AWS Global Infrastructure

Software Testing

Topics Covered
  • Testing With Selenium WebDriver (58 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

How To Find Elements in Selenium WebDriver?

Last updated on Nov 27,2019 4.8K Views
2 / 8 Blog from Locators and Waits in Selenium

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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.

Find Elements in Selenium WebDriver: Why do we need 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.

Find Elements in Selenium WebDriver: Difference between “FindElement” and “FindElements”

Find Element

Find Elements

Returns the first matching web element if multiple web elements are discovered by the locator

Returns a list of matching web elements

Throws NoSuchElementException if the element is not found

Returns an empty list if no matching element found

This method is used only to detect a unique web element

This method is used to return a collection of matching elements.

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.

Find Elements in Selenium WebDriver: Locator Strategy/ Types of locators

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

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
}
} 

Image- Selenium – Locating Web Elements on Page- Edureka

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"));

...

}

}

 

Image- Selenium – Locating Web Elements on Page- Edureka

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");
    
    }
    
    }
    

     

    Image- Selenium – Locating Web Elements on Page- Edureka

    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");
    }
    } 

    Image- Selenium – Locating Web Elements on Page- Edureka

     

    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]

    Image- Selenium – Locating Web Elements on Page- Edureka

     

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

    Image- Selenium – Locating Web Elements on Page- Edureka

     

    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();
    
       }
    
    }
    
    

    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

    AbsoluteRelative
    A direct way to locate an elementStarts from the middle of the DOM element
    Brittle can break if the path of accessing the element changes due to the positionRelatively stable since the search is relative to DOM
    Starts with “/” and from the rootStarts with “//” and it can start search anywhere  in the DOM
    Longer XPATH expressionsShorter expressions
    //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

    Image- Selenium – Locating Web Elements on Page- Edureka

     

    Fusion Instance#2

    Image- Selenium – Locating Web Elements on Page- Edureka

    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′]

     

    Image- Selenium – Locating Web Elements on Page- Edureka

     

    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.

     

    Image- Selenium – Locating Web Elements on Page- Edureka

     

    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

     

    Image- Selenium – Locating Web Elements on Page- Edureka

    Preceding

    Select all nodes that come before the current node.

    Syntax:

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

    Find Elements in Selenium WebDriver: Locating elements in an array of elements

    Image- Selenium – Locating Web Elements on Page- Edureka

     

    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 ith element of an array using [index] position of  the array.

    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.

    If you wish to learn Selenium and build a career in the testing domain, then check out our interactive, live-online Selenium Certification Training here, that comes with 24*7 support to guide you throughout your learning period.

    Got a question for us? Please mention it in the comments section of  “How To Find Elements in Selenium WebDriver?” article and we will get back to you.

    Comments
    0 Comments

    Browse Categories

    webinar REGISTER FOR FREE WEBINAR
    REGISTER NOW
    webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

    Subscribe to our Newsletter, and get personalized recommendations.