Coded UI Tests for jqueryui
Introduction
Visual Studio UI Test Scenarios and Extensibility is described in my blog here. An oft-asked question in this respect is how Visual Studio UI Test works with jquery controls. Jquery has become a very popular platform for building custom controls for the web. In this article, I will analyze how UI widgets available at https://jqueryui.com are supported in Visual Studio UI Testing.
In the extensibility blog, I had described 4 levels of support in Visual Studio UI Test. To recap
Level 1:- Basic Recording & Playback: Create an action log for a rich bug & fast-forward action recording with Microsoft Test Manager.
Level 1a:- Intent Aware actions: Improve the resilience of your action recording playback & improve the readability of the action log.
Level 2:- Rich Property validation: Write powerful validations in Coded UI Test.
Level 3:- Automation API: Author expressive automation scripts in C# or VB.
Level 1 – Basic Recording and Playback.
For all the jqueryui widgets, I found that record & playback of actions worked correctly with the default IE plugin.
The default recording is not resilient. Lots of redundant actions are getting recorded. These redundant actions are prone to failure. I can significantly improve the quality of recording by implementing action filters.
Level 1a – Intent Aware Actions
I found that some of the jquery-ui widgets required us to build a custom action filter to ensure that recording is intent-aware and more resilient. Let me drill down with more with some examples.
AutoComplete
The jqueryui AutoComplete consists of a textbox which brings up a list of options which the user selects. When the option is selected using Keyboard, a redundant {Enter} is recorded. Similarly when the option is selected using Mouse, set value of edit box is not generated. The ideal result when using the AutoComplete box is to get a “Set Value of <text> in textbox”.
We can create an action filter which removes the redundant {Enter} in case of keyboard scenario.
The code in the ActionFilter looks like
Here we remove the action from the Action stack if there is a {Enter} key on the AutoComplete box.
Similarly we can generate a set value when using Mouse on the AutoComplete box.
The code in the ActionFilter looks like
Here we replace the mouse actions with a setvalue on the AutoComplete textbox.
DatePicker
In case of date picker, the default recording results in clicks on links which represent dates & months. This recording is not resilient at all and results in different results based on the current date. The ideal recording would be “Set Value <date> in textbox”.
We can create an action filter which removes the actions on the calendar widget and replace with set value on the textbox with the finally selected date.
The code in the ActionFilter looks like
Level 2:- Rich Property validation
The default properties (provided by IE plugin) were sufficient to validate the important properties of most jqueryui widgets. For Accordion & Slider, we need to build a property provider.
Accordion
We need to navigate to the H3 tag which hosts the hyperlink. The "aria-expanded" property of the H3 tag can be used to verify if the tab is expanded.
UITestControl.GetProperty("aria-expanded") method can be used here.
Slider
For slider, there is no attribute or property which gets the value of the slider.
The ideal solution would be to update jquery library to set the aria-valuenow attribute. Till that gets implemented, the following code snippets execute a javscript snippet and sets the aria-valuenow on the slider div. We can then use GetProperty(“aria-valuenow”) to retrieve the current value of the slider.
var code = "slider.setAttribute('aria-valuenow',$( '#slider' ).slider( 'value' ));";
var slider = SliderPane.NativeElement as IHTMLElement;
if (slider != null)
{
var doc = slider.document as IHTMLDocument2;
IHTMLWindow2 window = doc.parentWindow;
if (window != null)
{
var ret = window.execScript(code, "javascript");
}
}
var sliderValue = SliderPane.GetProperty("aria-valuenow");
PS: window.execScript is specific to IE. If you are on Firefox, use eval. Also note that this depends on the current implementation of jqueryui.
The above code snippets can be used either in a PropertyProvider extension or directly in the Coded UI Test.
Here are some references if you want to build a property provider-
Level 3- Automation API
In my opinion, the existing API provided by IE plugin is sufficient for jqueryui controls also. If you are creating property provider for Accordion & Sldier, the corresponding specialized classes can also be created.
Summary
- Recording accuracy can be improved for some controls by writing action filters. I have attached the sample code for creating action filters for DatePicker & AutoComplete.
- Playback is correct for all controls.
- Some of the relevant properties are not exposed directly in the UI Testing API. We may have to run some javascript and retrieve the properties using the mshtml API.
A detailed per-control description is given below.
Jqueryui Control |
Record & Playback |
Assertion |
Accordion |
Click on tabs is sometimes shown as click on pane. While recording ensure that clicks are recorded as clicks on hyperlink (and not pane). If hand-coding, use HtmlHyperlink object for selecting tabs. |
Use the Coded UI Test Builder navigation dial to move to the H3 tag which hosts the hyperlink. Call GetProperty("aria-expanded") to verify that the tab is expanded. |
AutoComplete |
When using keyboard, a redundant {Enter} is done. When using Mouse, set value of edit box is not generated. Custom action filters (attached sample) can fix the issue. The action filter ignores the redundant enter on the autocomplete box. It also replaces the mouse click action on the auto-complete select box with a set value. |
Standard textbox asserts |
Button |
Clicks on pane. |
Properties of pane. Use DOM properties if required. IHTMLElement2 element = uiTestControl.NativeElement as IHTMLElement2; Some buttons are just labels fronting a hidden checkbox/radio button. In this case, we can navigate to the checkbox/radio button and use its properties for assertion. |
DatePicker |
Needs an action filter. See attached sample. The action filter removes all actions on calendar controls. It fires a set value on the textbox after a date is selected. |
Standard textbox asserts. |
Dialog |
Raw actions - clicks |
Standard pane asserts |
ProgressBar |
Non-interactable |
Use GetProperty(“aria-valuenow”) |
Slider |
Clicks on the div. Depends on start state being identical. May have problems if size is different during playback. |
Option 1:- (Recommended) Modify jqueryui to set aria properties and read them using GetProperty. Option 2:-
|
Tabs |
Raw actions - clicks |
ControlDefinition for the parent LI tag has ui-tabs-selected when the tab is selected. |
