Almost everyone in the Selenium world knows of the power of XPATH as a locating strategy, at the same way, most of them also know of its slowness on IE.
Now, if your tests have relatively simple XPATH locators, putting some effort to change them to CSS (which has native support on all browsers) is a very good investment and will impact your tests with instant time improvements.
For this week’s tip, we’ve decided to start addressing the basic rules for the move of simple locators from XPATH to CSS.
Direct child
A direct child in XPATH is defined by the use of a “/“, while on CSS, it’s defined using “>”
Examples:
//div/a css=div > a
Child or subchild
If an element could be inside another or one it’s childs, it’s defined in XPATH using “//” and in CSS just by a whitespace
Examples:
//div//a css=div a
Id
An element’s id in XPATH is defined using: “[@id='example']” and in CSS using: “#”
Examples:
//div[@id='example']//a css=div#example a
Class
For class, things are pretty similar in XPATH: “[@class='example']” while in CSS it’s just “.”
Examples:
//div[@class='example']//a css=div.example a
Thats’ all for now, as you can see, the first rules a pretty simple, and you even make you locators shorter and cleaner.
Stay tuned for our next Tip of the Week, we will keep addressing more complex locators soon!
[...] my previous TOTW about improving your locators, this blog post will show you some advanced CSS rules and pseudo-classes that will help you move [...]
I really like keeping up with your articles! It truly helps me get through the morning routine.
[...] we already mentioned in our previous posts CSS Selectors in Selenium Demystified and Start improving your locators, CSS as a location strategy generally far outperforms [...]
if the class value has space in it then following is not working
//div[@class='example test']//a
css=div.example test —> not working
css=div[class=example test] –> working
In the case of an element having multiple classes you can chain them together.
css=div.example.test
-adam
Somebody basically help to make seriously articles I’d state. This is actually very first time I visited your web page and thus far? I amazed with the research you made to create this valuable publish amazing. Superb job!
how can be use xpath
//a[text()='Click here']
//label[text()='Name']/ancestor::tr
Please help me with these xpath
Here is the help
css=a:contains(‘Click here’)
you cannot navigate to ancestor by giving reference of child in CSS
In this case:
How can I locate the second one?: “”
Please help me with this one
please kindly help me with this:
css=a:contains(‘Click here’)
what if i try to find one contains some chinese character.
what sould i do?
thanks in advance! please send me a mail if possible.
I tried to locate the sibling of an item with css locator. the locator is like “css=input#but1+br+input”, but it seems not to be identified by Selenium IDE. anything wrong with the grammar?
Hey thanks for sharing this.. this locator information is very helpful
[error] locator not found: css=input#but1 + br + input.
This works up to css=input#but1 + br