如何通过 selenium 获取 ExtJS 组合框的选定值？

Question

我有一个使用 ExtJS 呈现的网页。它使用一些生成的 ID 呈现多个组合框。并且每个组合框都选择了不同的选项。如何找出每个组合中选择了哪个值？

在调试 HTML DOM 时，我观察到 ExtJS 呈现 DIV 是不同的，并且可选选项最后呈现在不同的 DIV 中。所以我无法定义任何 XPath 来找出选定的值。

下面是代码sn-p

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

渲染后在'sample' 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，因为在呈现组合的 div 和包含可用选项的 div 之间没有映射。如果它只是一个组合，那么它会很好，但在我的情况下，我有多个具有相同值的组合框。

Answer 1

使用 selenium(How to use JavaScript with Selenium WebDriver Java) 执行 JS。在js中你可以使用“Ext.ComponentQuery.query('combo')[0].value”代码来获取组合值

Answer 2

要在被选中的 dropDown 元素中获取文本，您需要遍历 x-combo-list-inner 中的所有 div，获取它的类值，如果它包含 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();
                }
            });
        });
    });
});