在Python,Java和其他几个selenium绑定中,对select->option
HTML结构有一个非常方便的抽象,Select
class。
例如,假设有以下select
标记:
<select id="fruits" class="select" name="fruits">
<option value="1">Banana</option>
<option value="2">Mango</option>
</select>
以下是我们如何在Python中操作它:
from selenium.webdriver.support.ui import Select
select = Select(driver.find_element_by_id('fruits'))
# get all options
print select.options
# get all selected options
print select.all_selected_options
# select an option by value
select.select_by_value('1')
# select by visible text
select.select_by_visible_text('Mango')
换句话说,它是非常透明且易于使用的抽象。
是否可以以类似的方式操纵量角器中的select
标签?
这不是How to select option in drop down protractorjs e2e tests或How to click on option in select box in Protractor test?的重复。功能
答案 0 :(得分:22)
在Protractor中没有这样的东西,但我们可以写自己的:
选择-wrapper.js 强>
'use strict';
var SelectWrapper = function(selector) {
this.webElement = element(selector);
};
SelectWrapper.prototype.getOptions = function() {
return this.webElement.all(by.tagName('option'));
};
SelectWrapper.prototype.getSelectedOptions = function() {
return this.webElement.all(by.css('option[selected="selected"]'));
};
SelectWrapper.prototype.selectByValue = function(value) {
return this.webElement.all(by.css('option[value="' + value + '"]')).click();
};
SelectWrapper.prototype.selectByPartialText = function(text) {
return this.webElement.all(by.cssContainingText('option', text)).click();
};
SelectWrapper.prototype.selectByText = function(text) {
return this.webElement.all(by.xpath('option[.="' + text + '"]')).click();
};
module.exports = SelectWrapper;
用法
var SelectWrapper = require('select-wrapper');
var mySelect = new SelectWrapper(by.id('fruits'));
# select an option by value
mySelect.selectByValue('1');
# select by visible text
mySelect.selectByText('Mango');
答案 1 :(得分:1)
启动Protractor v.0.22.0即可使用
the new By.cssContainingText
locator:
element(by.cssContainingText('option', 'Mango'));
答案 2 :(得分:1)
使用Typescript的代码:
标记名:
by.tagName( '选项')
by.tagName( 'MD-选项')
by.tagName( '礼')
Section Count
A - 2 140
A - 3 458
<强>二手:强>
selectOption(selector: string, item: string) {
let selectList: any;
let desiredOption: any;
selectList = element(by.css(selector));
selectList.click();
selectList.findElements(by.tagName('option'))
.then(function findMatchingOption(options: any) {
options.some(function (option: any) {
option.getText().then(function doesOptionMatch(text: string) {
if (item === text) {
desiredOption = option;
return true;
}
});
});
})
.then(function clickOption() {
if (desiredOption) {
desiredOption.click();
}
});
}
答案 3 :(得分:1)
无需自己实施:)。我们写了一个库,其中包括3种选择选项的方法:
selectOption(option: ElementFinder |Locator | string, timeout?: number): Promise<void>
selectOptionByIndex(select: ElementFinder | Locator | string, index: number, timeout?: number): Promise<void>
selectOptionByText(select: ElementFinder | Locator | string, text: string, timeout?: number): Promise<void>
此功能的其他功能是,在执行select
上的任何操作之前,他们会等待显示元素。
你可以在npm @hetznercloud/protractor-test-helper找到它。 提供了TypeScript的类型。