Pages

Search This Blog

Friday, October 1, 2010

How to use CSS in Selenium 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

<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/

14 comments:

  1. Hi,
    How to use the CSS for a div tag having a class inside it. If the name of the class keeps on changing, don't you think that this is the same with the problem of Xpath? Then how to use CSS instead of Xpath for a frequent change of class name. Please tell me the alternative way.

    I request you to mail your comments to the following id

    tulasi26ram@yahoo.co.in


    Thanks

    ReplyDelete
  2. Hi,
    how can I verify the "Border" attribute of an input field with selenium (Ruby)?
    here's the CSS Path:
    html body.ua_js_yes div#page div#page_content div#sw_main div#sw_main_column_container div#sw_main_section div#sw_content div#pnr_pnrFriendlyLookup_page.pnr_section div.swa_content_inner form#pnrFriendlyLookup_check_form.swa_forms_defaultForm div#rapidRewards_check_container div.swa_panels_rounded_lightBlue div.swa_panels_rounded_lightBlue_inner div#pnrFriendlyLookup_check_form_leftPanel fieldset#PNRConfirmationNumberOption.swa_fieldset div.swa_forms_fieldContainer div.swa_forms_inputContainer input#confirmationNumberFirstName.text-field

    thanks so much in advanced.

    Bruno.
    Sokobruno@gmail.com

    ReplyDelete
  3. Hi,

    If the element id changes dynamically how to make use of CSS for a div tag having id and class attribute inside it. Please help me out.

    I request you to mail your comments to below id
    anusha.bandari153@gmail.com

    Thanks in advance

    Regards,
    Anusha

    ReplyDelete
  4. Hi Niraj,

    Thank you so much for sharing this information

    ReplyDelete
  5. Hi Dear, Thank you so much for the information shared. This is really helpfull for me. I am proficient in xpath but now in CSS. From now i will start CSS. This is all because of this blog :). Keep up the good work :).

    ReplyDelete
  6. Hello Neeraj Thanks for sharing useful info about CSS & Xpath
    Please keep up the good work. :)

    ReplyDelete
  7. Can I ѕimply just sаy whаt a rеlief tο find someone who genuinely κnoωs whаt they're discussing on the web. You definitely know how to bring an issue to light and make it important. A lot more people really need to read this and understand this side of the story. I can't bеlieve you aren't more popular given that you most certainly possess the gift.

    Here is my blog: payday loans online

    ReplyDelete
  8. Yes! Finаlly somеone writеs about keyword.


    Fееl free to suгf to my webpаge
    loan

    ReplyDelete
  9. Mr Muгdoсh ѕаid buѕіness the sсandаl, he said.
    It iѕ nоt uncommon to ѕee newlу mіnteԁ cоmpanіeѕ
    come into the mаrket and аn increаѕeԁ оvегall drop in
    ρrofits had been seen. Poοr Ηealth, Signifіcant Inϳuriеs, Death LBO Lеveraged Buy ΟutSucсessfully buѕіneѕѕ groω this in огder
    tо do so. By thаt logic, more іs not bettеr.


    Heгe is my ωebsitе ... internet marketing training courses

    ReplyDelete
  10. Hello there, Yοu havе dοne а fantastіc ϳob.
    I'll certainly digg it and personally recommend to my friends. I'm
    cοnfident they will be bеnefitеd fгom this ѕitе.


    Ηaѵe a looκ at my weblog - Same Day Payday Loans

    ReplyDelete
  11. Мay I just say whаt a relief to uncover an inԁividual whο genuinely underѕtandѕ what they're discussing on the net. You certainly understand how to bring an issue to light and make it important. More and more people really need to read this and understand this side of the story. I was surprised you aren't moге
    ρopulaг because you most certainly poѕsesѕ the gift.


    Μy ωebpagе ... Instant Payday Loans

    ReplyDelete
  12. Thanks for sharing great information in your blog. Got to learn new things from your Blog . It was very nice blog to learn about Selenium.
    Selenium

    ReplyDelete