如何通過硒獲取ExtJS組合框的選定值？

Question

我有一個使用ExtJS呈現的網頁。它使用一些生成的ID呈現多個Comboboxes。每個組合框都有不同的選項。我怎樣才能找出每個組合中選擇哪個值？

在調試HTML DOM時，我觀察到ExtJS渲染DIV是不同的，可選選項在最後的不同DIV中呈現。所以我無法定義任何XPath來找出選定的值。

以下是代碼片段

<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> 

呈現在「樣本」 DIV生成的HTML後是

<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> 

並且選項獨立地存在於DOM的這樣

結束

<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> 

我不能只是迭代每個x-combo-list-inner，因爲有n o渲染組合的div與保存可用選項的div之間的映射。如果它只是一個組合，那麼它會很好，但在我的情況下，我有多個具有相同值的組合框。

Answer 1

Eexecute JS使用硒（How to use JavaScript with Selenium WebDriver Java）。在js中，你可以使用「Ext.ComponentQuery.query（'combo'）[0] .value」代碼來獲得組合值

Answer 2

要在dropDown元素中選擇文本，您需要遍歷x-combo-list-inner中的所有div，獲取它的class值，如果它包含x-combo-selected，則返回它的文本。不知道JS的正確性，但是這看起來應該像（我沒有測試此代碼）：

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(); 
       } 
      }); 
     }); 
    }); 
});