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

Question

我正在使用ExtJS渲染网页。它会呈现多个下拉框，每个下拉框都有一个生成的ID，并且每个下拉框都选择了不同的选项。我该如何找出每个下拉框中选择的值？

在调试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>

在渲染后，“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，因为呈现组合框的

和包含可用选项的

之间没有映射。如果只是一个单一的组合框，那么问题就解决了，但在我的情况下，我有多个具有相同值的组合框。

- sidgate

---

HTML的示例将会很有帮助。谢谢。 - Andrey Egorov

code and generated HTML added - sidgate

你尝试过在每个组合框上使用cls选项添加类，并在Selenium中使用XPath查询它们吗？ - Ben

Answer 1

使用Selenium执行JS(如何在Java中使用Selenium WebDriver和JavaScript)。在js中，您可以使用 "Ext.ComponentQuery.query('combo')[0].value" 代码获取组合框的值。

- Rishi Saraf

Answer 2

要获取下拉元素中所选的文本，您需要遍历 x-combo-list-inner 中的所有 div，获取其类值，并检查它是否包含 x-combo-selected，然后返回其文本。不确定 JavaScript 代码的正确性，但应该像这样（我还没有测试过这段代码）：

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

- Andrey Egorov

---

如果我只有一个组合框，那么这将起作用。但是我有多个具有相同选项的组合框。因此，我不能仅迭代x-combo-list-inner。 - sidgate

你可以迭代所有你想要的元素，并获取每个组合框中所选项目的文本。 - Andrey Egorov

我们如何将 x-combo-list-inner 选项链接到在不同的 div 中呈现的 Ext 组合框？ - sidgate