Locators

Locating Elements

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

Locating by Id
Locating by Name
Locating Hyperlinks by Link Text
Locating by Xpath
Locating by DOM
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 3^rd 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.

Locators

Related Posts

0 comments:

Post a Comment