My Blog List

Monday, November 14, 2011

Selenium - waitForCondition with JavaScript Expressions


Selenium provides select method to select an item/option from drop-down lists and comboboxes. But this will work for simple listboxes only. For complex comboboxes like textbox with image, clicking the image will open drop-down list will not support normal methods. Here I am listing out different ways to handle select boxes. Thanks to bloggers as I read these from one and more blogs.


Exmaples:
Consider the following example where there are two drop-downs, one for the states and the other for counties.
The county drop-down is populated based on the state selection.
You can see in the site above, when the state is selected, a spinner shows up for a few seconds before the county drop-down is populated. 
Here we are using waitForCondition as it allows to mention explicitly TIMEOUT whereas selenium provided waitFor allows only default TIMEOUT value.

1. Dependent drop-down Lists using waitForCondition
Using waitForCondition and some JavaScript, we wait until display style attribute changes to ‘none’ in the snippet below.
  1. selenium.open("myURL");
  2. selenium.selectFrame("mainFrame");
  3. selenium.select("state""label=California");
  4. selenium.waitForCondition("var value = selenium.browserbot.findElementOrNull('loading_county_drop_down'); value.style.display == 'none'","10000");
  5. selenium.select("county""label=Amador County");

2. Using waitForCondition for multiple Conditions
  1. selenium.waitForCondition("var value = selenium.browserbot.findElementOrNull('loading_county_drop_down'); value.style.display == 'none' || selenium.browserbot.getUserWindow().document.form.county.options[0].text == 'Select a county of California';""10000");

3. Using waitForNotVisible and/or waitForSelectOptions
  1. selenium.waitForNotVisible("loading_county_drop_down");
  2. selenium.waitForSelectOptions("county","regexpi:Amador County");

4. Progress Messages:
You may have seen many AJAX intensive sites displaying a ‘Loading..’ or ‘Saving..’ or ‘Processing…’ message when a button or a link is clicked. In such cases you may find this to be helpful to wait for the status text to change or disappear.
Assuming that a ‘Saving’ message is displayed within a div tag when a fictional ‘Save’ button is clicked in the snippet below:
  1. selenium.waitForCondition("var value = selenium.getText(\"//div[@class='save-text']\");value != \"Saving\"""20000"); 
In general, .Net sites that use the web form controls, panel controls etc, trigger an asynchronous postback everytime a form control is filled or a .Net tab or panel control is clicked etc. In such cases, I’ve found the following to be very helpful in waiting for the postback to complete.
  1. selenium.waitForCondition("selenium.browserbot.getUserWindow().Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack() == false;","10000"); 
Now for the killer part, for sites that use jQuery, if all you need is to confirm there aren’t any active asynchronous requests, then the following does the trick:
  1. selenium.waitForCondition("selenium.browserbot.getUserWindow().$.active == 0""10000");
As you can see, there are several possible variations to a single command. The possibilities are endless with Selenium.

2 comments:

  1. Thanks for sharing great information in your blog. Got to learn new things from your Blog . It was very nice blog to learn about Selenium

    ReplyDelete
  2. Thank you for sharing this article, I can learn a lot and could also be a reference, I hope to read the next your article updates.
    Hadoop Training | Excellent Hadoop Online Training | Hadoop Online Training Center| Learn Hadoop Online Training

    ReplyDelete