Selenium Tips: Start improving your locators

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!