jQuery selectors are important features of the jQuery library. jQuery selectors are based on CSS1-3 selectors along with some additional selectors. These selectors use the familiar CSS Selector syntax to allow developers to quickly and easily identify page elements to operate using the jQuery library methods. Similar to CSS selectors, these selectors allow us to find and manipulate HTML elements as a single element or list of elements.
jQuery selectors can be used where CSS selectors are not supported natively by the browsers.
In this recipe, we will explore in brief how to use jQuery selectors with Selenium WebDriver.
Let's create a test that checks that specified checkboxes are selected when a page is displayed, as follows:
@Test
public void testDefaultSelectedCheckbox() {
// Expected list of selected Checkbox
List<String> checked = Arrays
.asList("user128_admin", "user220_browser");
// Create an instance of JavaScript Executor from driver
JavascriptExecutor js = (JavascriptExecutor) driver;
// Locate all the Checkbox which are checked by calling jQuery find()
// method.
// find() method returns elements in array
@SuppressWarnings("unchecked")
List<WebElement> elements = (List<WebElement>) js
.executeScript("return jQuery.find(':checked')");
// Verify two Checkbox are selected
assertEquals(elements.size(), 2);
// Verify correct Checkbox are selected
for (WebElement element : elements) {
assertTrue(checked.contains(element.getAttribute("id")));
}
}Selenium WebDriver can be enhanced by jQuery selectors using the jQuery API. However, we need to make sure that the page has the jQuery API loaded before using these selectors. The jQuery API provides the find() function through which we can search for elements. We need to use the JavaScriptExecutor class to use jQuery's find() method. In this example, we will find all the selected checkboxes on a page by calling the find() method:
//Locate all the Checkbox which are checked by calling jQuery find() method.
//find() method returns elements in array
List<WebElement> elements = (List<WebElement>) js.executeScript("return jQuery.find(':checked')");
The find() method returns a single WebElement or a list of WebElements matching the selector criteria. For more details and a list of available jQuery selectors, please visit http://api.jquery.com/category/selectors/.
You can also use the CSS Selectors described in this chapter with the jQuery find() method.
To use jQuery selectors, the page under test should have the jQuery library loaded. If your application does not use jQuery, you can load jQuery on the page by attaching the jQuery library at runtime with the following methods:
private void injectjQueryIfNeeded() {
if (!jQueryLoaded())
injectjQuery();
}
public Boolean jQueryLoaded() {
Boolean loaded;
try {
loaded = (Boolean) driver.executeScript("return jQuery()!=null");
} catch (WebDriverException e) {
loaded = false;
}
return loaded;
}
public void injectjQuery() {
driver.executeScript(" var headID = document.getElementsByTagName("head")[0];"
+ "var newScript = document.createElement('script');"
+ "newScript.type = 'text/javascript';"
+ "newScript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';"
+ "headID.appendChild(newScript);");
}The injectjQueryIfNeeded() method will internally call the jQueryLoaded() method to see if the jQuery object is available on the page. If the page does not have the jQuery object defined, the injectjQueryIfNeeded() method will call the injectjQuery() method to attach the jQuery library to the page header at runtime. This is done by adding a <script> element, which refers to the Google Content Delivery Network (CDN) for the jQuery library file, to the page. You may change the version used in this example to the latest version of the jQuery library.