如何在Selenium Webdriver中处理ExtJS的组合框

嗨，我有一个基于ExtJS的用户界面。我已经知道，在ExtJS中，组合框不是一个真正的组合框，而是输入文本字段，下拉框图像和列表的组合。现在我能够识别控制，但我坚持从列表中选择值。在HTML源代码中，我看到列表显示为单独的div，并在我们单击下拉列表时在源代码末尾附加。找到下面的下拉控件的HTML源代码。 {如何在Selenium Webdriver中处理ExtJS的组合框

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

现在我有问题，从列表中选择值列表的div元素是不依附于控制。请同时参阅屏幕截图，在那里我有多个类似的控件[命名“添加安全到宇宙”] Screenshot of the ExtJS UI

在屏幕截图中可以看到多个下拉菜单[添加安全到宇宙]强调，所有的降名单中出现同样的价值。所以我怎样才能从下拉列表中识别这些值。我想知道ExtJS如何维护下拉div元素与组合框小部件的映射，以便我可以使用相同的逻辑来识别列表。任何人都可以告诉我如何在硒webdriver做这件事？

来源

2013-04-30 Mrunal Gosar

您是否注意到页面上只有一个可见的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(); 
}

来源

2013-05-01 21:33:47

感谢您的支持！我玩了几个小时，这解决了我的问题。 – callisto 2014-04-17 07:32:17

什么，我可以建议是：

你抓住所有的输入，比如：

List<WebElement> inputList = driver.findElements(By.cssSelector("input cssSelector")); // you must complete this cssSelector 
WebElement input = inputList.get(0); // get the 1st input 
input.click(); //click on the first input and the option list appears.

你抓住所有的 “选项”，如：

List<WebElement> optionList = driver.findElements(By.cssSelector(".x-combo-list-item")); // get all options 
WebElement option = optionList.get(1); 
option.click(); 
input.sendKeys(option.getText()); //getText() get the html inner value

这只是为例Java，你实际上可以使用一个循环foreach如果你想自动填充所有你的inputs。

来源

2013-04-30 09:43:21 e1che

嗨@ e1che我的问题是链接的下拉控件与它显示的列表。比方说，我想为第三个组合框下拉选择一个值，所以我怎么能做到这一点，如果我会尝试通过文本搜索值，例如列表中存在的值，我会得到多个这样的控件。也是非常危险的，因为相同的值也可能出现在其他一些下拉列表中。让我们说一个例子有2个组合框，它们在列表中存储了整数现在我怎么能在这两个组合框中选择值？ – 2013-04-30 10:06:35

我用JavaScriptExecutor，我SelectRandomOption看起来是这样的：

public void SelectRandomOption() 
{ 
    String randomOptionIndex = "Math.floor(Math.random()*Ext.getCmp('" + ExtJSIdOfComboBox + "').getStore().getCount()-1)"; 
    String randomOptionValue = "Ext.getCmp('" + ExtJSIdOfComboBox + "').getStore().getAt(" + randomOptionIndex + ").getData()['model']"; 
    String jsScript = "Ext.getCmp('" + ExtJSIdOfComboBox + "').setValue(" + randomOptionValue + ");"; 
    js.ExecuteScript(jsScript); 
}

来源

2013-07-26 08:01:58

我同意。但在这种情况下，我更喜欢JavaScriptExecutor。仅仅因为在ExtJS中经常会有'onselect'，'onclick'和其他听众可能很难（甚至不可能）用纯硒驱动程序实现。 – 2013-09-11 09:06:05

我基本上都用不过上面的标记答案它需要一点适应Ext Js 4.1。

它本质上是相同的方法，但你需要寻找一个可见的div标有

我用XPath类“X-boundlist”，并使用了看起来是这样的疑问：

.//div[@class[contains(.,'x-boundlist')]]

和然后检索与点击的李符合所需的条目：

.//li[normalize-space(text())='combobox entry text']

我已经把正常化空间在那里的XPath似乎有真正的问题，如果你不修剪的字符串。该方法做了左+右修剪，并删除重复的空格，例如 ' blah blah '将更改为'blah blah'。

来源

2014-06-12 15:07:21

如何在Selenium Webdriver中处理ExtJS的组合框

回答

相关问题