We can select the elements in WebDriver by using jQuery Selectors also.

Basically jQuery is a lightweight JavaScript library, whose purpose is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

A jQuery statement typically follows the syntax pattern

$(selector).action() or jQuery(selector).action()

$/jQuery sign/keyword to access jQuery library Selector Query/pattern that will act on the DOM Action Action to be performed on the selected element.

We will make use of jQuery Selector in Selenium WebDriver to identify/select the elements. jQuery selectors can be used where CSS selectors are not supported natively by the browsers.

How to use jQuery Selector in WebDriver?

First of all we need to check whether the application under test is including jQuery library or not. If it is not included then we need insert that into DOM. The following piece of code will check & insert it, if it is not present.

// Code here

Once it is included, we can make use of jQuery selectors. Since jQuery has to be executed on top of JavaScript, we need a Java Script executor. The following piece of code will make the driver to execute the jQuery.

// javascript executor js = driver();

Once the driver is capable of executing jQuery then we can make call the selectors from the following line of code.

IWebelement element = Driver.find();

Basic jQuery selectors:

There are three categories of jQuery selectors.

Basic CSS Selectors:

Syntax Description

* Matches any Element

E Matches all elements with tag name E

E C Matches all elements with tag name E that are descendents of C

E>C Matches all elements with tag name C that are direct descendents/children of E

E.C Matches all elements E, that are having class name of C

E#i Matches all elements E, that are having ID of i

E[a] Matches all elements E, that are attribute of a, of any value

E[a=v] Matches all elements E, that are attribute of a, of value v

E[a^=v] Matches all elements E, that are attribute of a, whose value starts with v

E[a$=v] Matches all elements E, that are attribute of a, whose value ends with v

E[a*=v] Matches all elements E, that are attribute of a, whose value contains v

Examples:

Command Description$('input') Selects all input elements$('input#123') Selects input element whose id is 123$('input.someclass') Selects input element whose class name is someclass

$('a[href$=.pdf]')Selects all <a> elements that possess an href attribute that ends with .pdf

Positional Selectors:

These selectors match based on the positional relationship between the elements. These can be appended to any base selector

Syntax Description

B:first Select the first element the page matching to the base element B

B:last Select the last element the page matching to the base element B

B:first-child Selects all elements from B that are first childrenB:last-child Selects all elements from B that are last childrenB:only-child Selects all elements from B that are only children

B:nth-child(n) Selects all elements from B that are nth order children. Index of n start from 1

B:nth-child(odd|even) Selects all elements from B that are even or odd order children.

(First child will be considered as odd as index of n starts from 1)

B:eq(n) Selects the nth element within the set of elements defined by B. (Index of n starts from 0)

B:gt(n) Selects the elements after nth element(excluding) within the set of elements defined by B. (Index of n starts from 0)

B:lt(n) Selects the elements until nth element(excluding) within the set of elements defined by B. (Index of n starts from 0)

Examples:

Command Description$('input:first') Selects first <input> element$('img[src$=.png]:first') Selects first .png image in the page$('button.small:lst') Selects the last button on the page that has class name small

$('li:first-child')Selects all the <li> elements that are first item in their respective lists

$('a:only-child')Selects all <a> elements that are the only element within their parent

$('li:nth-child(2)')Selects all the <li> elements that are the second item with-in their respective lists

$('tr:nth-child(odd)') Selects all odd <tr> elements within a table$('div:nth-child(3n)') Selects every 3rd <div> element$('div:nth-child(3n+2)') Selects the element after every 3rd <div> element.$('input:eq(1)') Selects the second input element.$('input:gt(1)') Selects all input elements except the first two elements

$('input:lt(0)') Selects the first input element.

IWebDriver Driver = new InternetExplorerDriver(@"C:\IE");

Driver.Url = "http://google.com";

IJavaScriptExecutor js = (IJavaScriptExecutor)Driver;

bool flag = (bool)js.ExecuteScript("return typeof jQuery == 'undefined'");

IWebElement textBox = Driver.FindElement(By.CssSelector("input[id^=gbqf]"));

textBox.SendKeys("kumar ");

if (flag)

{

js.ExecuteScript("var jq = document.createElement('script');jq.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(jq);");

Thread.Sleep(300);

}

string text = @"return $(""input[id^='gbq']"")";

IEnumerable<IWebElement> elements = (IEnumerable<IWebElement>)js.ExecuteScript(text);

foreach (IWebElement element in (IEnumerable<IWebElement>)elements)

{

element.SendKeys("Praveen");

element.SendKeys(Keys.Enter);

}