Telerik blogs

One of the key factors to the increased popularity of jQuery is its powerful selector syntax that can be used to find elements in the DOM. The syntax enables simple selections like selecting an element using an ID (#my_id) to more complex mutli-element selections and filtering.

The power and popularity of jQuery selectors prompted many of our customers to request support for similar selection/query syntax in our WebAii Testing Framework. It is worth noting here that WebUI Test Studio is built on top off the WebAii Framework and customers using WebUI Test Studio have full access to the framework API directly from their tests.

During Q1 timeframe we went ahead and implemented the jQuery selectors syntax in the WebAii Framework and enabled customers familiar with jQuery to leverage the full power of selectors directly in their tests. You now can execute similar searches and filtering on elements directly from .NET code in your automated tests. Under the covers we used our WebAii framework DOM combined with LINQ to perform and implement the different jQuery selectors.

The selectors are exposed as a set of strongly-typed methods on a jQuery class that gets added as an extension to our Find object when the ArtOfTest.WebAii.jQuery namespace is imported in your test. As soon as you add the namespace above, you are ready to go!

 

image

So let's take a look at how some of these selectors work in the WebAii API:

Let's start with the simple basic find by ID:

Element e = Find.jQuery().id("my_id");

Few things worth noting about our jQuery selectors implementation:

1. All selectors are strongly-typed with explicit names as detailed in the selectors documentation here. The strongly-typed implementation makes discovering the supported selectors much easier. When used in Visual Studio, the editor's auto-completion pretty much guides you through crafting the selector. It also makes the test code much easier to understand and read.

Here are few examples:

To perform the following jQuery selection:

  • $('*')

         =>  Find all elements

You write: jQuery.all()

  • $("input[name$='letter']")

    => Find all 'input' elements that have an attribute ending with 'letter'

You write: jQuery().tag("input").attributes("name$=letter")

  • $("div span:last-child")

    => Find all span elements that are descendants of a div and filter only on the span that is the last child of its parent

Your write: jQuery().tag("div").descendant().tag("span").lastChild()

  • $("form input")

    => Find all input elements that are children of input

You write: jQuery().tag("form").descendant().tag("input")

2. All the methods - except for single element selectors [ i.e. id(), first(), last() ] and form selectors [i.e input(), image()...etc ] - return a jQuery class which will be the result of the previous selector and will enable you to execute yet another jQuery selection on it. There is no limit to how many selections you can chain/pipe in a row.

3. All single element selectors return WebAii's Element object and the form selectors return a list of the corresponding strongly-typed HtmlControl type.

For example, jQuery().text() returns a List<HtmlInputTextBox>() so you can then execute directly against those objects. Here is a line of code that verifies that all textboxes inside the form tag don't contain the text 'foo'.

Assert.IsFalse(Find.jQuery().tag("form").text().Any(t => t.Text.Contains("foo")));

Note how we used the power of jQuery to perform the search and then the power of LINQ and our HtmlControls to do this verification in just one line of code.

We hope you get to play around with this API and our Automated Testing Tools and feel free to send us any feedback on it. We are always looking forward to enhance our API and take it to the next level.

 

Thanks,

Faris / twitter @farissweis


Comments

Comments are disabled in preview mode.