How to get the selected value of ExtJS combobox through selenium?

Question

I am having a webpage rendered using ExtJS. It renders multiple number of Comboboxes with some generated ID. And each combobox have a different option selected. How can I find out which value is selected in each combo?

While debugging the the HTML DOM I observed that the ExtJS rendering DIV is different and the selectable options are rendered in different DIV at the end. So I am not able to define any XPath to find out the selected value.

Following is the code snippet

<div class="guide-bg" id="sample"><table>
    <tr><td id="row1"> </td></tr>
    <tr><td id="row2"></td></tr>
</table></div>

<script>
Ext.namespace('Ext.exampledata');
Ext.exampledata.states = [['Alabama'],[ 'Alaska'],['Arizona']];

var store1 = new Ext.data.SimpleStore({
    fields: [ 'state'],
    data : Ext.exampledata.states
});

var combo1 = new Ext.form.ComboBox({
        store: store1, displayField:'state', typeAhead: true,
        mode: 'local', forceSelection: true, triggerAction: 'all',
        emptyText:'Select...', selectOnFocus:true, renderTo: 'row1'
});

var combo2 = new Ext.form.ComboBox({
        store: store1, displayField:'state', typeAhead: true,
        mode: 'local', forceSelection: true, triggerAction: 'all',
        emptyText:'Select...', selectOnFocus:true, renderTo: 'row2'
});
</script>

After rendering the HTML generated at the 'sample' div is

<div class="guide-bg" id="sample">
  <table>
    <tbody><tr><td id="row1"> 
    <div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen148" style="width: 206px;">
        <input type="text" name="ext-comp-1028" id="ext-comp-1028" autocomplete="off" size="24" class="x-form-text x-form-field x-form-empty-field" style="width: 181px;">
        <img class="x-form-trigger x-form-arrow-trigger" src="sp.gif" id="ext-gen149">
    </div></td></tr>
    <tr><td id="row2">
    <div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen150" style="width: 206px;">
        <input type="text" name="ext-comp-1029" id="ext-comp-1029" autocomplete="off" size="24" class="x-form-text x-form-field x-form-empty-field" style="width: 181px;">
        <img class="x-form-trigger x-form-arrow-trigger" src="sp.gif" id="ext-gen151">
    </div></td></tr>
  </tbody></table>
</div>

And the options are present independently at the end of the DOM like this

<div class="x-layer x-combo-list " id="ext-gen146" style="position: absolute; z-index: 12005; visibility: hidden; 
    left: -10000px; top: -10000px; width: 204px; height: 129px; font-size: 12px;">
    <div class="x-combo-list-inner" id="ext-gen147" style="width: 204px; height: 129px;">
        <div class="x-combo-list-item x-combo-selected">Alabama</div>
        <div class="x-combo-list-item">Alaska</div>
        <div class="x-combo-list-item">Arizona</div>
    </div>
</div>

I cannot just iterate over each x-combo-list-inner as there is no mapping between the div that renders the combo and the div that holds the available options. If it was just a single combo then it would have been fine, but in my case I have multiple combo boxes with same values.

Have you tried adding a class on each of your combobox using `cls` option and query them using `XPath` in Selenium? — Ben, Sep 02 '14 at 04:14

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

Eexecute JS using selenium(How to use JavaScript with Selenium WebDriver Java). In js you can use "Ext.ComponentQuery.query('combo')[0].value" code to get combo value

edited May 23 '17 at 10:26

Community

1
1

answered Sep 03 '14 at 07:03

Rishi Saraf

1,644
2
14
27

score -1 · Answer 2 · answered Aug 28 '14 at 05:43

-1

To get text in dropDown element which is selected you need to iterate through all divs in x-combo-list-inner, gets it class value and if it contains x-combo-selected then return it's text. Not sure about correctness of js but this should look like (i haven't tested this code):

driver.findElement(webdriver.By.css(".x-combo-list-inner")).then(function(parentElement) {
    return parentElement.findElements(".x-combo-list-item").then(function(innerElements) {
        return innerElements.forEach(function(elem) {
            return elem.getAttribute('class').then(function(classValue) {
                if(classValue.indexOf('x-combo-selected') > -1) {
                    return elem.getText();
                }
            });
        });
    });
});

answered Aug 28 '14 at 05:43

Andrey Egorov

1,249
1
12
9

this would work if I have only single combobox. But I have multiple comboboxes with same options. So I cannot just iterate over the `x-combo-list-inner` – sidgate Aug 28 '14 at 05:53
you can iterate over all elements you want and get text of selected item in each combobox – Andrey Egorov Aug 28 '14 at 06:35
How can we link the `x-combo-list-inner` options to the Ext combo that is rendered in different `div`? – sidgate Aug 28 '14 at 08:36

How to get the selected value of ExtJS combobox through selenium?

2 Answers2