Select -> 选项抽象

Question

在 Python、Java 和其他几个 selenium 绑定中，有一个非常方便的抽象 select->option HTML 结构，一个 Select class。 =19=]

例如，假设有以下 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 or How to click on option in select box in Protractor test? 的副本。}

Answer 1

量角器中没有这样的东西，但是我们可以自己写：

select-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');

注意 Select 是 reserved word in JavaScript

Answer 2

开始 Protractor v.0.22.0 你可以直接使用 the new By.cssContainingText locator:

element(by.cssContainingText('option', 'Mango'));

See the API reference.

Answer 3

使用 Typescript 的代码：

标记名：

by.tagName('option')

by.tagName('md-option')

by.tagName('li')

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();
            }
        });
}

已用：

selectOption('//select[@id="food"]', 'Pizza');

Answer 4

无需自己实施 :)。我们编写了一个库，其中包含 3 种方法 select 一个选项：

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 的类型。

Select -> 选项抽象

Select -> option abstraction

python

testing

selenium

selenium-webdriver

protractor