Javascript 如何通过selenium获取ExtJS combobox的选定值?
我有一个网页呈现使用ExtJS。它呈现多个组合框,其中包含一些生成的ID。每个组合框都选择了不同的选项。如何找出每个组合中选择的值 在调试HTMLDOM时,我观察到ExtJS呈现DIV是不同的,可选择的选项最后呈现在不同的DIV中。因此,我无法定义任何XPath来查找所选值 下面是代码片段Javascript 如何通过selenium获取ExtJS combobox的选定值?,javascript,extjs,selenium,xpath,Javascript,Extjs,Selenium,Xpath,我有一个网页呈现使用ExtJS。它呈现多个组合框,其中包含一些生成的ID。每个组合框都选择了不同的选项。如何找出每个组合中选择的值 在调试HTMLDOM时,我观察到ExtJS呈现DIV是不同的,可选择的选项最后呈现在不同的DIV中。因此,我无法定义任何XPath来查找所选值 下面是代码片段 <div class="guide-bg" id="sample"><table> <tr><td id="row1"> </td><
<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>
Ext.namespace('Ext.exampledata');
Ext.exampledata.states=[['Alabama']、['Alaska']、['Arizona'];
var store1=新的Ext.data.SimpleStore({
字段:[“状态”],
数据:Ext.exampledata.states
});
var combo1=新的Ext.form.ComboBox({
store:store1,displayField:'state',typeAhead:true,
模式:“本地”,强制选择:真,触发动作:“全部”,
清空文本:'Select…',selectOnFocus:true,renderTo:'row1'
});
var combo2=新的Ext.form.ComboBox({
store:store1,displayField:'state',typeAhead:true,
模式:“本地”,强制选择:真,触发动作:“全部”,
清空文本:'Select…',selectOnFocus:true,renderTo:'row2'
});
呈现“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-internal
,因为呈现组合的div和保存可用选项的div之间没有映射。如果它只是一个组合,那么就可以了,但在我的例子中,我有多个具有相同值的组合框。要在选中的下拉元素中获取文本,您需要迭代x-combo-list-inner中的所有div,获取它的类值,如果它包含x-combo-selected,则返回它的文本。不确定js的正确性,但这应该是这样的(我还没有测试过这段代码):
使用selenium()执行JS。在js中,您可以使用“Ext.ComponentQuery.query('combo')[0].value”代码来获取组合值,html示例将非常有用。Thank.code和生成的HTML addedHave您是否尝试过使用Selenium中的
cls
选项在每个组合框上添加一个类,并使用XPath
查询它们?如果我只有一个组合框,这将起作用。但我有多个具有相同选项的组合框。所以我不能只迭代x-combo-list-internal
你可以迭代你想要的所有元素,并在每个ComboBox中获得所选项目的文本我们如何将x-combo-list-internal
选项链接到在不同div
中呈现的Ext combo?
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();
}
});
});
});
});