jQuery Events Do Not Fire During Test Execution

Note: As of the 2012 R1 version released in April 2012, use the AjaxTimeout Test Step Property to wait for pending jQuery server requests.

PROBLEM

Local jQuery events do not fire when executing tests in Test Studio.

SOLUTION

Test Studio does not automatically call local jQuery events. You must add a coded step to make the local jQuery event fire manually.

 

Here is a simple jQuery drop down menu (and its HTML source code) that displays a corresponding message based on item selection.

 

Figure 1.
Before Selection

Figure 2.
Available Selections

Figure 3.
After Selection

 

<select id="item_select">
    <option>Select an Item</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

 

Invoke the script that calls the message with the following coded step:

 

Actions.InvokeScript("$('#item_select').change()");
 

"#" means to look for an id and "item_select" is the id of the control.


  • The guideline is to always pair the two steps together. Immediately after performing the selection (drop-down, radio button, etc.), run the coded step that calls the .change function for that element.
  • Although .change is the most frequent jQuery event, your application might be attaching to a different event. Another common example is .select. If those two do not work, ask your developers which jQuery event is attached to the element.
  • If you have a choice between using id and name on an element, we recommend using id. It is usually a unique value which will make your tests run more reliably. Name is sometimes duplicated, which can cause your test to find and act on the wrong element, since the selector will act on the first element it finds matching the selector criteria.

 

Here's how to invoke a jQuery script based on name:


Actions.InvokeScript("$(name='elementName').change()");

 

Here are test steps recorded against the demo page above:

 

 

  1. Navigate to the page.
  2. Choose "Item 3."
  3. Manually invoke the script with a coded step.
  4. Verify the "You have selected the last item" message appears.

 

Please visit here for more information on jQuery.