Select an option from an ExtJS ComboBox

Posted: October 3rd, 2009 | Author: Dave | Filed under: Examples | Tags: , | 10 Comments »

Automating an ExtJS web application can be difficult due to the dynamic nature of the page. For example, the majority of unique ID attributes in the HTML will be different between builds, which causes problems locating elements reliably. Another issue is selected items from a ComboBox, which is not a normal HTML <select> element, but an <input> that is populated from data in a completely separate section of the DOM.

Below is a solution for locating the ComboBox elements and the Selenium commands needed to select values in them. This example is taken from code written for the Selenium RC Java client library.

1
2
3
4
5
6
7
8
9
10
11

//click the down arrow image on the right of the ComboBox and assumes that there is a label before the component
selenium.click("//label[text()='My Combo List']/following-sibling::div/descendant::img[contains(@class, 'x-form-arrow-trigger')]");
 
//wait for a drop down list of options to be visible
selenium.waitForCondition("var value = selenium.isElementPresent('//div[contains(@class, 'x-combo-list') and contains(@style, 'visibility: visible')]'); value == true", "60000");
 
//click the required drop down item based on the text of the target item
selenium.click("//div[contains(@class, 'x-combo-list')]/descendant::div[contains(@class, 'x-combo-list-item')][text()='My Value']");
 
//wait for the drop down list of options to be no longer visible
selenium.waitForCondition("var value = selenium.isElementPresent('//div[contains(@class, 'x-combo-list') and contains(@style, 'visibility: visible')]'); value == false", "60000");

10 Comments on “Select an option from an ExtJS ComboBox”

  1. 1 Lubomir Zrnecko said at 2:18 pm on May 2nd, 2010:

    Hi, just want to thank you for this howto. I struggled with combobox for a while and even tried to leverage Ext API to test it but your solution is the right one. I just had to replace outer apostrophes in waitForCondition expression with escaped quote marks, without this change I got JS syntax error.

  2. 2 Dave said at 8:01 pm on May 3rd, 2010:

    Cool. Glad I could help! :)

  3. 3 ssr said at 2:04 pm on May 10th, 2010:

    is anyone tried export test case to JUNIT and executed? actually i am trying it with junit, the select is not happening. Any suggestions?

  4. 4 Irina said at 8:13 pm on May 27th, 2010:

    Thank you very much for this example! Works just fine for me :)

  5. 5 Evgeny said at 4:24 pm on November 9th, 2010:

    Hi.
    The second click() operation does not work for me without any warning/error. The second waitForCondition() ends with timeout…
    What can be reason that combo item is not selected from dropped down list?

    Thank you

  6. 6 Rohit A said at 9:18 am on November 17th, 2010:

    Dave,

    You are super…
    This piece of code is flawless… Works on any extjs webpage.

    Thanks again.

    Also what could be done if there are 2 labels which are similar in name.

    For Eg in a Printer:
    Tray 1:
    [Label] Paper Type

    Tray 2:
    [Label] Paper Type

  7. 7 Dave said at 1:48 pm on November 18th, 2010:

    Hi Rohit,

    Glad this helped you. To differentiate between the two labels in the locator you could use something like:

    Tray 1:
    //div[contains(@class, 'x-combo-list')]/descendant::div[contains(@class, 'x-combo-list-item')][text()='Paper Type'][1]

    Tray 2:
    //div[contains(@class, 'x-combo-list')]/descendant::div[contains(@class, 'x-combo-list-item')][text()='Paper Type'][2]

    The [1] and [2] determine which element to return when multiple are found. Please note that I’ve not tested the above, so it might need some tweaking to get it to work. I recommend the XPath Checker addon for Firefox (https://addons.mozilla.org/en-US/firefox/addon/1095/) to help you find the most suitable XPaths.

  8. 8 Kanaka Kuchibhotla said at 11:05 pm on March 23rd, 2011:

    I have the generated source code as:
    Organization:

    how should I make selenium select the value that I want when jquery populates the list?
    I used this but it does not work:
    selenium.click(“//a[@id='ui-active-menuitem']“);

    Can you please suggest something?

  9. 9 Eran Golan said at 1:11 pm on August 4th, 2011:

    Hi,

    Just wanted to say THANKS.

    I’m in a point right now that I realize how important it is to share our knowledge with rest of the developers out there..

    cheers.

  10. 10 Krishnam Raju said at 7:55 am on August 9th, 2011:

    Well, I am finding it difficult, rather, impossible to click TreeGrid elements with this appraoch.

    Dave, could you please help me. Thanks in advance for your time.

Leave a Reply