Using jQuery selectors

jQuery selectors is one of the important feature 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 upon with the jQuery library methods. Similar to CSS selectors, these selectors allow us to locate 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.

How to do it...

Let's create a test which checks that specified checkboxes are selected when page is displayed, as follows:

@SuppressWarnings("unchecked")
@Test
public void testDefaultSelectedCheckbox() { 
    
    WebDriver driver = new ChromeDriver();
    driver.get("http://dl.dropbox.com/u/55228056/Locators.html");
    
    //Expected list of selected Checkbox
    List<String> checked =  Arrays.asList(new String[]{"user1_admin", "user3_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
    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")));
    
    driver.close();
}

How it works...

Selenium WebDriver can be enhanced by jQuery selectors using the jQuery API. However, we need to make sure that the page has 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 locate 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 WebElement or list of WebElements matching the selector criteria back to the test. 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.

There's more...

For using jQuery selectors, the page under test should have jQuery library loaded. If your application does not use jQuery, you can load the jQuery on the page by attaching jQuery library at runtime with the following utility 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 the Google CDN (Content Delivery Network) for jQuery library file, to the page. You may change the version used in this example to the latest version of the jQuery library.