如何在SeleniumWebDriver中处理ExtJS的组合框
嗨,我有一个基于ExtJS的UI。我知道在ExtJS中,组合框不是一个真正的组合框,而是输入文本字段、下拉框图像和列表的组合。现在我能够识别控件,但我仍然无法从列表中选择值。在HTML源代码中,我看到列表显示为一个单独的div,当我们单击下拉列表时,它会附着在源代码的末尾。在下面找到下拉控件的HTML源代码。 {如何在SeleniumWebDriver中处理ExtJS的组合框,extjs,selenium-webdriver,Extjs,Selenium Webdriver,嗨,我有一个基于ExtJS的UI。我知道在ExtJS中,组合框不是一个真正的组合框,而是输入文本字段、下拉框图像和列表的组合。现在我能够识别控件,但我仍然无法从列表中选择值。在HTML源代码中,我看到列表显示为一个单独的div,当我们单击下拉列表时,它会附着在源代码的末尾。在下面找到下拉控件的HTML源代码。 { } 在下拉列表的HTML源代码下方找到: <div id="ext-gen726" class="x-layer x-combo-list x-resizable-pinne
}
在下拉列表的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>
12h宇宙
1h宇宙
24小时宇宙
2h宇宙
4h宇宙
现在我无法从列表中选择值,因为列表的div元素没有附加到控件。
另外,请参考屏幕截图,我有多个类似的控件[名为“向宇宙添加安全性”]
在屏幕截图中,您可以看到多个下拉列表[向宇宙添加安全]高亮显示,所有下拉列表中显示的值相同。那么如何从下拉列表中识别这些值呢。
我想知道ExtJS如何使用ComboBox小部件维护下拉div元素的映射,以便使用相同的逻辑识别列表。有谁能告诉我如何在selenium webdriver中执行此操作吗?我建议: 您捕获所有输入,如:
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-inputList=driver.findElements(By.cssSelector(“input-cssSelector”);//您必须完成此CSS选择器
WebElement input=inputList.get(0);//获取第一个输入
输入。单击()//单击第一个输入,出现选项列表。
您可以捕获所有“选项”,如:
List optionList=driver.findElements(By.cssSelector(“.x-combo-List-item”);//获取所有选项
WebElement option=optionList.get(1);
选项。单击();
input.sendKeys(option.getText())//getText()获取html内部值
这只是Java中的一个例子,如果您想为所有
输入自动填充,您注意到页面上只有一个可见的x-combo-list
吗?(如果您可以同时打开两个组合列表,请告诉我)
因此,您只需要关心可见的一个x-combo-list
Css选择器:.x-combo-list[style*='visibility:visible;'].x-combo-list-item
Xpath:/*[包含(@class,'x-combo-list')和包含(@style,'visibility:visible;')]/*[包含(@class,'x-combo-list-item')]
//未经测试的java代码,仅用于逻辑
公共无效clickComboItem(WebElement输入,字符串目标){
input.click();//单击输入弹出组合列表
List-comboItems=driver.findElements(By.cssSelector(“.x-combo-List[style*='visibility:visible;'].x-combo-List-item”);
对于(int i=0;i item.Text.Trim()==target)。单击();
}
我使用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);
}
.//div[@class[contains(.,'x-boundlist')]]
我基本上使用了上面的标记答案,但是它需要对ExtJS4.1进行一些调整
这基本上是相同的方法,但您需要查找标有类“x-boundlist”的可见div
我使用了xpath并使用了类似以下内容的查询:
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);
}
.//div[@class[contains(.,'x-boundlist')]]
然后检索并单击与所需输入匹配的li:
.//li[normalize-space(text())='combobox entry text']
我在其中放了规范化空间,因为如果不修剪字符串,xpath似乎有真正的问题。该方法进行左+右修剪,并删除重复的空格,例如
“废话废话”
将更改为“废话废话”
您好@e1che我的问题是将下拉控件链接到它显示的列表。假设我希望为第三个组合框下拉列表选择一个值,那么如何在HTML源代码中进行选择?如果我尝试通过列表中的文本搜索值,我将获得多个这样的控件。这也是非常危险的,因为相同的值也可能出现在其他下拉列表中。举个例子,有两个组合框,它们的列表中存储了整数,现在我如何在这两个组合框中选择值?我同意。但在这种情况下,我还是更喜欢JavaScriptExecutor。这仅仅是因为在ExtJS中经常有“onselect”、“onclick”和其他监听器,使用纯selenium驱动程序可能很难(甚至不可能)实现。谢谢!我已经玩了几个小时,这解决了我的问题。