Tester In You

January 18, 2011

Use CSS to locate an element

Naga January 18, 2011 2

Use CSS to locate an element*

XPath locator is one of the most precise locator. But this has a disadvantage of its locator types thats is its slowness.

This disadvantage of xpath you can see when running the tests under IE while Firefox works with xpath pretty faster than IE.

The main thing is that tests which intensively use XPath work extremely slow under IE and this feature is the cause of huge variety of problems related to execution speed as well as quality of the tests itself especially during operations with dynamic content.
For this reason CSS locators can be good alternative of XPath. What can we do with CSS locators?

CSS locator will give you clear picture of your element hierarchy

----------------------------------------------------------------------------------------
lets say your xpath of an element is like,

xpath=//div//span/a

the same locatore can be identified by CSS is .

css=div * span > a

from the above example there are two symbol are being used to locate an element.

1) "/" in xpath is just a next level of DOM element hierarchy and same used in CSS is ">"
2) "//" in xpath is any DOM object hierarchy level under current object and same used in CSS is "*"
----------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------
The way we use attributes in xpath we can use attributes in css as well. lets say your element's xpath is like this

//input[@name='continue' and @type='button']

can be written in CSS

css=input[name='continue'][type='button']
or
css=input[name=continue][type=button]

in xpath we can check the partial attribute value matching but in CSS we can't

----------------------------------------------------------------------------------------

lets say your element is like this

so the xpath to locate this element is .

xpath=//div[contains(@title,"title")]

and same can be used in CSS like

css=div[title~=title]

But if your element is like this

then CSS locator css=div[title~=title] wont work here .

----------------------------------------------------------------------------------------

CSS provides us the easy way to specify the element.
lets say your element is like this,

input id="username
we can write in xpath like this

xpath=//input[@id="username"]

and same can be specified in CSS

css=input#username

so whenever we want to identify any element with their id then we use #

lets say your element is like this,

input class="password

then xpath is

xpath=//input[@class="password"]

and corresponding CSS is

css=input.password

so whenever we want to identify any element with their class then we use .

----------------------------------------------------------------------------------------

below are the element sturcture used in above examples.

An interesting feature of CSS in Selenium :Sub-String matches.

^=	Match a prefix
$=	Match a suffix
*=	Match a substring

1 css=a[id^='id_prefix_']

A link with an “id” that starts with the text “id_prefix_”

2 css=a[id$='_id_sufix']

A link with an “id” that ends with the text “_id_sufix”

3 css=a[id*='id_pattern']

A link with an “id” that contains the text “id_pattern”

----------------------------------------------------------------------------------------

*This content was copied form another blog.....I will try to write some real time examples how to identify elements by using CSS in my next post...

Tags Continue Reading

Locating by CSS

Naga January 18, 2011 0

Locating by CSS:

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents. CSS uses Selectors for binding style properties to elements in the document. These Selectors can be used by Selenium as another locating strategy.

id="loginForm">

class="required" name="username" type="text" />

class="required passfield" name="password" type="password" />

name="continue" type="submit" value="Login" />

name="continue" type="button" value="Clear" />

css=form#loginForm (3)
css=input[name="username"] (4)
css=input.required[type="text"] (4)
css=input.passfield (5)
css=#loginForm input[type="button"] (4)
css=#loginForm input:nth-child(2) (5)

For more information about CSS Selectors, the best place to go is the W3C publication. You’ll find additional references there.

Note

Most experienced Selenium users recommend CSS as their locating strategy of choice as it’s considerably faster than XPath and can find the most complicated objects in an intrinsic HTML document.

Tags # Locating Elements Continue Reading

Locating by DOM

Naga January 18, 2011 0

Locating By DOM

The Document Object Model represents an HTML document and can be accessed using JavaScript. This location strategy takes JavaScript that evaluates to an element on the page, which can be simply the element’s location using the hierarchical dotted notation.

Since only dom locators start with “document”, it is not necessary to include the dom= label when specifying a DOM locator.

id="loginForm">

name="username" type="text" />

name="password" type="password" />

name="continue" type="submit" value="Login" />

name="continue" type="button" value="Clear" />

dom=document.getElementById('loginForm') (3)
dom=document.forms['loginForm'] (3)
dom=document.forms[0] (3)
document.forms[0].username (4)
document.forms[0].elements['username'] (4)
document.forms[0].elements[0] (4)
document.forms[0].elements[3] (7)

You can use Selenium itself as well as other sites and extensions to explore the DOM of your web application. A good reference exists on W3Schools.

Tags # Locating Elements Continue Reading

Locating Hyperlinks by Link Text

Naga January 18, 2011 0

Locating Hyperlinks by Link Text:

This is a simple method of locating a hyperlink in your web page by using the text of the link. If two links with the same text are present, then the first match will be used.

Are you sure you want to do this?

href="continue.html">Continue

href="cancel.html">Cancel

link=Continue (4)
link=Cancel (5)

More Real time examples coming soon...

Tags # Locating Elements Continue Reading

Locating Element by XPath

Naga January 18, 2011 0

Locating Element by XPATH:

XPath is the language used for locating nodes in an XML document.
As HTML can be an implementation of XML (XHTML), Selenium users can leverage this powerful language to target elements in their web applications.
XPath extends beyond (as well as supporting) the simple methods of locating by id or name attributes, and opens up all sorts of new possibilities such as locating the third checkbox on the page.

One of the main reasons for using XPath is when you don’t have a suitable id or name attribute for the element you wish to locate. You can use XPath to either locate the element in absolute terms (not advised), or relative to an element that does have an id or name attribute.

XPath locators can also be used to specify elements via attributes other than id and name.

Absolute XPaths contain the location of all elements from the root (html) and as a result are likely to fail with only the slightest adjustment to the application.

By finding a nearby element with an id or name attribute (ideally a parent element) you can locate your target element based on the relationship. This is much less likely to change and can make your tests more robust.

Since only xpath locators start with “//”, it is not necessary to include the xpath= label when specifying an XPath locator.

id="loginForm">

name="username" type="text" />

name="password" type="password" />

name="continue" type="submit" value="Login" />

name="continue" type="button" value="Clear" />

xpath=/html/body/form[1] (3) - Absolute path (would break if the HTML was changed only slightly)
//form[1] (3) - First form element in the HTML
xpath=//form[@id='loginForm'] (3) - The form element with attribute named ‘id’ and the value ‘loginForm’
xpath=//form[input/\@name='username'] (4) - First form element with an input child element with attribute named ‘name’ and the value ‘username’
//input[@name='username'] (4) - First input element with attribute named ‘name’ and the value ‘username’
//form[@id='loginForm']/input[1] (4) - First input child element of the form element with attribute named ‘id’ and the value ‘loginForm’
//input[@name='continue'][@type='button'] (7) - Input with attribute named ‘name’ and the value ‘continue’ and attribute named ‘type’ and the value ‘button’
//form[@id='loginForm']/input[4] (7) - Fourth input child element of the form element with attribute named ‘id’ and value ‘loginForm’