Locating elements using advanced CSS selectors

We saw some basic CSS selectors in earlier recipes. In this recipe, we will explore some advanced CSS selectors for locating elements.

How to do it...

In the Locating elements using CSS selectors recipe, we explored some basic CSS selectors. Let's explore advanced CSS selectors such as adjacent sibling combinators and pseudo-classes as described in the following sections.

Finding child elements

CSS selectors provide various ways to locate child elements from parent elements.

For example, to locate the Username Field in the login form, we can use the following selector. Here, > is used denote the parent and child relationship.

WebElement userName = driver.findElement(By.cssSelector("form#loginForm > input"));

Similarly the nth-child() method can be used in the following way:

WebElement userName = driver.findElement(By.cssSelector("form#loginForm :nth-child(2)"));

Here, the second element in <form> is the Username field. The following table shows some of the structural pseudo-classes used to locate child elements:

Pseudo-class	Example	Description
:first-child	form#loginForm :first-child	This will locate the first element under the form, that is, the label for username.
:last-child	form#loginForm :last-child	This will locate the last element under the form, that is, the Logi n button.
:nth-child(2)	form#loginForm :nth-child(2)	This will locate the second child element under the form, that is, the Username field.

Finding sibling elements

With CSS selector, we can locate sibling elements using the + operator. For example, on the sample page the <p> element with Description for Product 2 text is selected in the following way:

WebElement productDescription = driver.findElement(By.cssSelector("div#top5 > p + p"));

In this example, the first child of div#top5 will be <p> with Description for Product 1 and its immediate sibling will be Description for Product 2. Here are few more adjacent sibling combinators for locating siblings:

p + p	div#top5 > p + p	Immediately following sibling. This will locate Description for Product 2.
p + * + p	div#top5 > p + * + p	Following sibling with one intermediary. This will locate Description for Product 3.

Using user action pseudo-classes

Using the user action :focus pseudo-class, we can locate the element which has current input focus in the following way:

WebElement productDescription = driver.findElement(By.cssSelector("input:focus"));

This will locate any element that currently has the input focus. You can also locate elements using :hover and :active pseudo-classes.

Using UI state pseudo-classes

Using UI state pseudo-classes, we can locate elements for various states such as control is enabled, disabled, and checked. The following table describes these in detail:

Pseudo-class	Example	Description
:enabled	input:enabled	This will locate all the elements that are enabled for user input.
:disabled	input:enabled	This will locate all the elements that are disabled for user input.
:checked	input:checked	This will locate all the elements (checkboxes) that are checked.

How it works...

Apart from the basic CSS selectors, you can also use various advanced CSS selector methods such as pseudo-classes or adjacent sibling combinators to locate the elements with Selenium WebDriver API.

Visit http://www.w3schools.com/cssref/css_selectors.asp for an exhaustive list of CSS selectors and their usage.

See also

• The Locating elements using CSS selectors recipe