Tuesday, February 16, 2016

Must know about LOCATORS

Must know about Locators 

Selenium uses what is called locators to find and match the elements of your page that 
it needs to interact with. There are 7 locators strategies included in Selenium:

Link

XPath (cheat sheet for XPATH)
ID
Name
CSS
UI-element 
DOM

 Example html source code.

 
<html>
  <body>

    <form id="login">
      <input name="username" type="text"/>
      <input name="password" type="password"/>

<input name="submit" type="submit" value="Continue!"/>
    </form>

  </body>
</html>


  •  Easily matches several elements: try to name your username field as login
  • Note
  • Usually, you don’t need to specify the locator prefix, Selenium will be able to infer the locator type by itself

1.1. Identifier
works with the id and name attributes of your html tags. Let’s consider the following example: 
Valid locators for this snippet are :
identifier=username
identifier=login
submit
PROS:

This strategy doesn’t rely on the structure of the page and will work even if it changes.
CONS:
  • 1.2 The Id strategy looks for an element in the page having an id attribute corresponding
    to the specified pattern. <label id="my_id" /> will be matched by a locator like id=my_id or just my_id
    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
    <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>

    Works well with fixed list of similar elements

    1.3 NAME
    Like the Id strategy, but on the name attribute. You can also specify a filter to refine your locator. Currently, there are two filter types :
    Value : matches elements with a name attribute and where the value follows a pattern. The following example illustrates the interest of filters :

    Scenario:
    we just added a strawberry pancake in our application and we want to test that the button that adds it into the cart works. With a locator like name=pancake, Selenium will find 3 elements and return the first one : the test will never fail even if the strawberry button is not here! Use a value filter like name=pancake value=Strawberry and the locator successfully identifies the Strawberry button.
    Index : same as name but works with an index. Using the previous example, the locatorname=pancake index=2 will select the Strawberry button.

    Tip
    the index starts at 0
    PROS:
    CONS:
    Difficult to use with data-bound lists 

    1.4 
    LINK
    This strategy is intended to select links only and selects the anchor element containing the specified text: link=The text of the link
    PROS:

    You have to know the text of the link before 

    •  Will only select anchor elements
    •  Useful when testing navigation

    CONS:

    1.5 DOM
    The DOM strategy works by locating elements that matches the javascript expression referring to an element in the DOM of the page.
    document.div[0].button[2]dom=function foo() {
    xpath=//button[@value="Blueberry"]: matches the Blueberry button
    //div[@id="pancakes"]/button[0]: same thing

    Allows very precise locators
    Name
    Link
dom=document.div['pancakes'].button[0]

 PROS : 
Javascript allows you to build dynamic locators
CONS :

 Relies on the structure of the page

 1.6 XPATH
While DOM is the recognized standard for navigation through an HTML element tree, 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. Valid XPath locators can be:
PROS:
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 

 CSS :
In WebDriver, in order to interact with a web element, such as clicking, or typing, we first need to locate the elements. In previous tutorial, we discussed the different ways we can locate the web elements.
In this WebDriver tutorial, we look at how we can use CSS Selectors in more detail and with examples to interact with web elements.
Using CSS selectors to locate elements has some benefits:
1. It’s faster;
2. It’s more readable;
3. It’s more used.
Locating Elements by Attribute
Let’s imagine we have a tag with the following attributes [id, class, name, value]

The generic way of locating elements by their attribute in CSS Selectors is

e.g.

We can use the same approach to lo
cate by id and class attributes, however, there are short forms that we can use to make it more readable.

In CSS, we can use # notation to select the id:
e.g.


We can also use the . notation to select the class


Take extra care when using the short form notations, especially the . class notation as there could be many web elements on the html source with the same class attribute.

Locating elements by More Than One Attribute
Sometimes there is a need to be more specific with the selection criteria in order to locate the correct element.
Suppose you have a html snippet as below

The value of the display could either be “none” or “block” depending on the ajax call. In this situation we have to locate the element by both class and style.

We could use

Locating Child Element

To locate the image tag, we would use:

There are occasions when there are multiple child elements within the same parent element such as list elements

As can be seen, the individual list elements don’t have any id associated with them. If we want to locate the element with text ‘Orange’, we have to use “nth-of-type”


Similarly, if we need to select the last child element, i.e. ‘Banana’, we can use

Strings and Randomly Generated Ids
We can also use string matchers to locate elements:

To select the first div element, we would use ^= which means ‘starts with’:

To select second div element, we would use $= which means ‘ends with’:

To select the last div element we would use *= which means ‘sub-string’
We can also use the ‘contains’

 Structure 
Structure-Dependent Or Not?
Locators can be classified into two categories:
  •  UI-element is a rather new locator
  •  It was at first a Selenium IDE extension
  •  It is now fully integrated into Selenium
  •  See the Section 9.4, “UI-Elements:”

o Structure-based locators: locators that rely on the structure of the page to find elements.

XPath DOM

o Attributes-based locators: locators that relies on the attributes of the elements to locate them

Identifier Id
CSS
  •  You should consider this before choosing a locator strategy
  •  Most people choose CSS because it is the most flexible and gives a good balance
    between using structure and attributes to find the elements 

   
Posted by at
Labels: