如何在 selenium webdriver 中处理 ExtJS 的组合框

2023-12-22

你好,我有一个基于 ExtJS 的 UI。我知道在 ExtJS 中,组合框不是真正的组合框,而是输入文本字段、下拉框图像和列表的组合。现在我能够识别控件,但我一直坚持从列表中选择值。在 HTML 源代码中,我看到列表显示为单独的 div,并在我们单击下拉菜单时附加在源代码的末尾。在下面找到下拉控件的 HTML 源代码。 {

<div id="ext-gen678" class="x-form-field-wrap x-form-btn-plugin-wrap" style="width: 556px;">
<div id="ext-gen676" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 521px;">
<input id="ext-gen677" type="hidden" name="GHVOg:#concat#~inputFld~ISGP_UNIV:ft_t_isgp.prnt_iss_grp_oid:0" value="">
<input id="GHVOg:Mixh8:0" class="x-form-text x-form-field gs_dropDown_input gs_req x-form-invalid x-form-focus" type="text" autocomplete="off" size="24" style="width: 504px;">
<img id="trigger-GHVOg:Mixh8:0" class="x-form-trigger x-form-arrow-trigger" alt="" src="../../ext/resources/images/default/s.gif">

}

下面找到下拉列表的 HTML 源代码:

<div id="ext-gen726" class="x-layer x-combo-list x-resizable-pinned" style="position: absolute; z-index: 12007; visibility: visible; left: 294px; top: 370px; width: 554px; height: 123px; font-size: 11px;">
<div id="ext-gen727" class="x-combo-list-inner" style="width: 554px; margin-bottom: 8px; height: 114px;">
<div class="x-combo-list-item"></div>
<div class="x-combo-list-item">12h Universe</div>
<div class="x-combo-list-item">1h Universe</div>
<div class="x-combo-list-item">24h Universe</div>
<div class="x-combo-list-item">2h Universe</div>
<div class="x-combo-list-item x-combo-selected">4h Universe</div>

Now i have problem selecting the value from the list as the div element of the list is not attached to the control. Also please refer the screen shot, where i have multiple similar controls [Named "Add Security to Universe"] Screenshot of the ExtJS UI

在屏幕截图中,您可以看到突出显示的多个下拉菜单 [向 Universe 添加安全性],并且所有下拉菜单在列表中显示的值相同。那么我如何从下拉列表中识别这些值。 我想知道 ExtJS 如何维护下拉 div 元素与组合框小部件的映射,以便我可以使用相同的逻辑来识别列表。谁能告诉我如何在 selenium webdriver 中做这件事?


您是否注意到只有一个可见x-combo-list在页面上? (如果您可以同时打开两个组合列表,请告诉我)

因此你只需要关心可见的x-combo-list.

CSS 选择器:.x-combo-list[style*='visibility: visible;'] .x-combo-list-item

Xpath: //*[contains(@class, 'x-combo-list') and contains(@style, 'visibility: visible;')]//*[contains(@class, 'x-combo-list-item')]

// untested java code, just for the logic
public void clickComboItem(WebElement input, String target) {
    input.click(); // click input to pop up the combo list
    List<WebElement> comboItems = driver.findElements(By.cssSelector(".x-combo-list[style*='visibility: visible;'] .x-combo-list-item"));
    for (int i = 0; i <= comboItems.size(); i++) {
        WebElement item = comboItems.get(i);
        if (item.getText().eqauls(target)) {
            item.click();
            break;
        }
    }
}
// compilable C# version
public void ClickComboItem(IWebElement input, string target) {
    input.Click();
    IList<IWebElement> comboItems = driver.findElements(By.CssSelector(".x-combo-list[style*='visibility: visible;'] .x-combo-list-item"));
    comboItems.First(item => item.Text.Trim() == target).Click();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 selenium webdriver 中处理 ExtJS 的组合框 的相关文章

随机推荐