CSS selectors

We saw in the previous section that XPath selectors can offer your tests a lot of flexibility to find elements on the page. Here, we will find the elements using CSS selectors (selectors are patterns used to select the elements you want to style.)

Note

It must be noted that Selenium IDE and Selenium RC use Sizzle, the framework used for selectors in jQuery, to find elements on the page. Not all of these can be translated to work in Selenium WebDriver.

Finding elements by CSS

We discussed that finding elements by XPath can be an extremely costly exercise. A way around this is to use CSS selectors to find the objects that you need. Selenium is compatible with CSS 1.0, CSS 2.0, and CSS 3.0 selectors. There are a number of items that are supported, such as namespace in CSS 3.0, and some pseudo classes and pseudo elements.

The syntax of your locator will look like css=cssSelector. Let's create our first selector to find an element on our page:

1. Open Selenium IDE.
2. Navigate to http...