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
<div title="here is m multiword title" />
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
<div title="my_title" />
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"></input>
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"></input>
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.
<html>
<body>
<form>
<input id="username"></input>
<input class="password"></input>
<input name="continue" type="button"></input>
<input name="cancel" type="button"></input>
<input value="a86b504a-faff-4a18-92d8-68720331c798" name="vid" type="hidden"><input value="LF_c10cf6d6" name="lf_cid" type="hidden"></form>
</body>
</html>
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”
Without specifying the type of element we can identify the element
to identify the google search button we can use Css like this
css=center > #sbds > #sblsbb > input
these CSS features are awesome more details can be found on
How to use CSS in Selenium extensively
and if you want to know in depth then visit this page.
http://www.w3.org/TR/css3-selectors/
