Locating Elements

Locating Elements

The various locator types are explained below with examples for each.

  1. Locating by Id
  2. Locating by Name
  3. Locating Hyperlinks by Link Text
  4. Locating by Xpath
  5. Locating by DOM
  6. Locating by CSS

    Locating by Id : If elements on a page have Id attribute then we can locate an element using its Id. Not all elements on the page have Id attribute. Since Id attribute is unique for an element(with the same page) we can identify the element even if it is moved in the page. We can find the Id of an element by using firebug.

    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


    Locating by Name : Some elements have name attribute
    example

    <html>  
<body>
    <div id="pancakes">
      <button type="button" name="pancake" value="Blueberry">Blueberry</button>
      <button type="button" name="pancake" value="Banana">Banana</button>
      <button type="button" name="pancake" value="Strawberry">Strawberry</button>
    </div>
  </body>
</html>

    We can use the following in the above case to select the 3rd button

    name=pancake value=Strawberry
    Or

    name=pancake index=2 (index starts with 0)

    PROS:
    • Works well with fixed list of similar elements
    CONS:
    • Difficult to use with data-bound lists


    Locating Hyperlinks by Link Text : We can locate links in a page by providing the link text
    example

    link=Forgot Password

    PROS:
    • Will only select anchor elements
    • Useful when testing navigation
    CONS:
    • You have to know the text of the link before

    Locating by DOM : DOM (Document Object Model) is a language independent convention for representing and interacting with objects in HTML, XHTML and XML document.
    DOM presents HTML document as a tree structure

    example for the below HTML code

    <html>  
<body>
    <div id="pancakes">
      <button type="button" name="pancake" value="Blueberry">Blueberry</button>
      <button type="button" name="pancake" value="Banana">Banana</button>
      <button type="button" name="pancake" value="Strawberry">Strawberry</button>
    </div>
  </body>
</html>

    DOM tree structure for the above HTML code will be like



    Accessing button with value Blueberry using DOM

    dom=document.div['pancake'].button[0]

    document.div[0].button[0]

    PROS:
    • Javascript allows you to build dynamic locators
    CONS:
    • Relies on the structure of the page



    Locating by Xpath : 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. There are two strategies which can be followed to locate an element using Xpath.

    1. Finding element by direct Xpath
    2. Finding element by using element attribute in XPath

    How to find Xpath : Lets see how to find the xpath for example in the below mentioned code

    <bookstore>
    <book>
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
    </book>
    </bookstore>

    Tree structure representation of the above code will be like



    Attributes : For code <title lang="en">Harry Potter</title> , the part highlighted in RED is the attribute. We can locate this in the application by using xpath in the following manners

    1. xpath=//title[@lang="en"] : This is also know as the relative path. It searches for the attribute anywhere in the page.
    2. xpath=/bookstore/book/title[@lang="en"] : This is the absolute path. It has to start from the root.


    Finding element by direct xpath : This uses the absolute path for locating an object
    Xpath to find nth element of a type :

    Finding element by using element attribute in Xpath : This uses relative path. The format is xpath=//element[@attribute='attribute value']

    Finding element by partial match on attribute content : Following can be used for partial search
    starts-with() : //div[starts-with(@id,'time_')]
    contains() : //div[contains(@id,'time_')]

    Finding element by text it contains : //element[text()='inner text']
    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


    What is CSS : CSS stands for Cascading Style Sheets. A CSS rule has two main parts: a selector, and one or more declarations:

    example :


    Selector Declaration

    The selector is normally the HTML element you want to style.

    Each declaration consists of a property and a value.

    The property is the style attribute you want to change. Each property has a value.

    CSS Id and Class : In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

    CSS Id : The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".

    The style rule below will be applied to the element with id="para1":

    #para1
    {
    text-align:center;
    color:red;
    }

    CSS Class : The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class.

    The class selector uses the HTML class attribute, and is defined with a "."

    In the example below, all HTML elements with class="center" will be center-aligned:

    .center {text-align:center;}

    Locating by CSS : : The CSS locator strategy uses CSS selectors to find the elements in the page.Selenium is compatible with CSS 1.0, CSS 2.0, and CSS 3.0 selectors. There are a number of items that are supported like namespace in CSS 3.0 and some pseudo classes and pseudo elements.

    The syntax of your locator will look like css=cssSelector.
at