Andy Tilston
Andy Tilston

Reputation: 227

Advise on hierarchy for element locators in selenium webdriver

whilst I am aware of how to search for the different elements on a page in Selenium Webdriver to usr for testing, e.g.by xpath, id, css etc, I was after some advise as to which hierarchy to use and why? E.g. should we use xpath locators before reverting to searching for the id?

Having an awareness of this will allow me to build my tests in the correct way so that they run as quickly as possible.

Upvotes: 1

Views: 10233

Answers (4)

Manish
Manish

Reputation: 31

More effective XPath could be

By.xpath("//div[@class='1']//div[@class='4']")

Here, assumption is Div with Class=4 is unique within class 2 child elements. Also, yo should avoid using . at the start of the element to make the traversal faster

Upvotes: 0

Runni Kumari
Runni Kumari

Reputation: 398

suppose here is the hierarchy:

<div class="1">............  (suppose it's div 1 open)
  <div class="2">........    (div 2 open)
     <div class="3">.......  (div 3 open)
     </div>.....             (div 3 closed)  
     <div class="4">......   (div 4 open)  
     </div>.....             (div 4 closed)
   </div>.........           (div 2 closed)
</div>.........              (div 1 closed)

now, we want to access div 4

Note: div 3 and div 4 are of same level, these two are child of div 2 whose parent is div 1

We want to access class 4

we ac do it using xpath but the class of div 4 is not unique and the class 1 is, so you can traverse it as such:

By.xpath(".//div[@class='1']/div/div[2]")

Explanation: div[2] means it is going to access the class 1 which has div of class 3 and whose child has two div of classes class 3 and class 4 but i want to access the second div which has class 4 so, div[2].

cssSelector

sometimes we cannot access the path so, we can access it by using css selector, suppose we have a scenario as such

<div class="1">
    <rect class="2">
         <text class="3">
         </text>
    </rect>
</div>

to access the class of text

we use By.cssSelector as:

By.cssSelector("text[class='3']");

Upvotes: -2

Helping Hands
Helping Hands

Reputation: 5396

According to my experience with selenium I think following is best hierarchy :

  1. Id

  2. Name

  3. Linktext

  4. Partial Linktext

  5. Tag Name

  6. class name

  7. Css

  8. xpath

1 - By ID for each and every element is always unique so easy to access for us and fast for web driver.Mostly we should prefer Id as first priority to find element.

2 - If By ID is not Ok then we should look at "Name". But many time it happens that multiple name is there so need to take care for this if same name attribute is multiple times there.

3 - "By linktext" & "By partial linktext" are also great ways to find element if all links in site have unique link text.

4 - If your site or page has group elements like dropdown , checkboxes then you can use attribute "By tagname" to find element.

5 - By "Class name" is rare way to find element because most of website using same class name for multiple items to apply css. But sure you can use it for unique class names.

6 - If you need speed to locate complex elements then kindly use attribute "Css selector" to find element.

7 - Main use of "Xpath" attribute to navigate for xml documents. Still you can use it for web page or site.

Note : Basically selection of element locator depends on your page that which type of things page contains like too many dropdowns , checkboxes, textboxes and a lot more. But my given steps are general which you can follow for any site to find elements and execute program in smooth way.

Hope above will help you a lot.

Other Reference link.

Upvotes: 11

Manish
Manish

Reputation: 31

Actually it is subjective.

Id and Name must be referred as the first choice in the case of most web apps.

ID

I've seen web apps using EXT-JS which dynamically assigns IDs at runtime. here, using ID will not do.

CSS

There are occurrences where the CSS working with FF and IE fails on Safari.

It is very much necessary to understand the AUT and then choose what is the best. For standard web apps the hierarchy could be

1) ID

2) Name

3) TagName

4) ClassName

5) CSS

6) XPath

7) LinkTtext/PartialLinkTest

Upvotes: 3

Related Questions