如何在硒鼓webdriver中处理ExtJS的组合框 [英] how to handle combo boxes of ExtJS in selenium webdriver

问题描述

你好我有一个基于ExtJS的UI。我已经知道，在ExtJS中，组合框不是真正的组合框，而是输入文本字段，下拉框的图像和列表的组合。现在我可以识别控件，但是我坚持从列表中选择值。在HTML源代码中，我看到列表显示为单独的div，当我们点击下拉列表时，它会被附加在源的末尾。找到下拉控件的HTML源代码。
{

 < div id =ext-gen678class =x-form-field-wrap x -form-b​​tn-plugin-wrapstyle =width：556px;> 
< div id =ext-gen676class =x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focusstyle =width：521px;> ; 
< input id =ext-gen677type =hiddenname =GHVOg：＃concat＃〜inputFld〜ISGP_UNIV：ft_t_isgp.prnt_iss_grp_oi​​d：0value => 
< input id =GHVOg：Mixh8：0class =x-form-text x-form-field gs_dropDown_input gs_req x-form-invalid x-form-focustype =textautocomplete = offsize =24style =width：504px;> 
< img id =trigger-GHVOg：Mixh8：0class =x-form-trigger x-form-arrow-triggeralt =src =../../ ext / resources /images/default/s.gif\"> 
  

}

的下拉列表：

 < div id =ext-gen726class =x-layer x-combo- list x-resizable-pinnedstyle =position：absolute; z-index：12007; visibility：visible; left：294px; top：370px; width：554px; height：123px; font-size：11px;> 
< div id =ext-gen727class =x-combo-list-innerstyle =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> 
  

现在我从列表中选择了值，因为列表的div元素没有附加到控制。
另请参考屏幕截图，我有多个类似的控件[命名为将安全添加到Universe]

在屏幕截图中，您可以看到多个下拉菜单（添加对Universe的安全性）突出显示，所有下拉菜单都相同值出现在列表中。那么我如何从下拉列表中识别这些值。
我想知道ExtJS如何维护与组合框小部件的下拉div元素的映射，以便我可以使用相同的逻辑来标识列表。任何人都可以告诉我如何在selenium webdriver中做这个事情？

解决方案

你注意到只有一个页面上可见的 x-combo-list （让我知道如果你可以同时打开两个组合列表）

因此，你只需要关心可见的一个 x-组合列表。

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

Xpath： // * [contains（@class，'x-combo-list'）and contains（@风格，'visibility：visible;'）] // * [contains（@class，'x-combo-list-item'）]

< pre class =lang-java prettyprint-override> //未测试的java代码，仅用于逻辑
public void clickComboItem（WebElement input，String target）{
input.click （）; //单击输入以弹出组合列表
列表< WebElement> comboItems = driver.findElements（By.cssSelector（。x-combo-list [style * ='visibility：visible;'] .x-combo-list-item））; （int i = 0; i< = comboItems.size（）; i ++）{
WebElement item = comboItems.get（i）;

if（item.getText（）。eqauls（target））{
item.click（）;
break;
}
}
}


  //可编译C＃版本
 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（）; 
} 
  

Hi i have a ExtJS based UI. I have come to know that in ExtJS the combo box is not a real combo box but a combination of input text field, image of drop down box and a list. Now i am able to identify the control but i am stuck at selecting the value from the list. In the HTML source i see that the list is appearing as a seperate div and gets attached at the end of the source when we click on the drop down. find below the HTML source of the drop down control. {

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

}

find below the HTML source of the drop down list:

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

In the screen shot you can see multiple drop downs [Add security to Universe] highlighted and all the drop downs have same value appearing in the list. so how can i identify these values from the drop down list. I was wondering how ExtJS maintains mapping of the drop down div elements with the combo Box widget so that i could use the same logic for identifying the list. Can anyone tell me how can i go about doing this thing in selenium webdriver?

解决方案

Did you notice that there will be only one visible x-combo-list on the page? (Let me know if you can open up two combo lists at the same time)

Therefore you only need to care about the visible one x-combo-list.

Css selector: .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();
}

这篇关于如何在硒鼓webdriver中处理ExtJS的组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！