Book Image

Selenium Testing Tools Cookbook

By : UNMESH GUNDECHA
Book Image

Selenium Testing Tools Cookbook

By: UNMESH GUNDECHA

Overview of this book

Web technologies are becoming increasingly complex and there is a need to test your web applications against a vast number of browsers and platforms, so you need to build highly reliable and maintainable test automation. This book will help you test your web applications effectively and efficiently with Selenium WebDriver."Selenium Testing Tools Cookbook" is an incremental guide that will help you learn and use advanced features of Selenium WebDriver API in various situations for building reliable test automation. You will learn how to effectively use features of Selenium using simple and detailed examples. This book will also teach you best practices, design patterns, and how to extend Selenium."Selenium Testing Tools Cookbook" shows developers and testers who already use Selenium, how to go to the next step and build a highly maintainable and reliable test framework using advanced features of the tool.The book starts with tips on advanced location strategy and effective use of Selenium WebDriver API. Then it demonstrates the use of design patterns such as Data Driven Tests and PageFactory for building maintainable test automation. It also explains extending Selenium WebDriver API along with implementing custom tasks and setting up your own distributed environment to run tests in parallel.It concludes with tips on integrating Selenium WebDriver with other popular tools, testing mobile web applications, and capturing videos of test runs. This books provides examples in Java, C#, Ruby, and Python."Selenium Testing Tools Cookbook" will help you in building a highly robust and maintainable test automation framework from start to finish.
Table of Contents (18 chapters)
Selenium Testing Tools Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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