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!
Related posts:
Selenium Tips: Improving your waiting skills
Selenium Tips: Infinite Loops Take Forever
Selenium Tips: Taking ScreenShots on the Server
[...] 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 [...]
cool good website yea nice job our review blog will soon be adding reviews on websites and add them to our blogs as the top best 1000 websites to visit we also do reviews on product recalls all types of reviews we will get back to you
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