选择 -> 选项抽象答案

【问题标题】：Select -> option abstraction选择 -> 选项抽象
【发布时间】：2015-04-27 16:57:25
【问题描述】：

在 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? 的副本。}

【问题讨论】：

为什么需要赏金？
@tox123 这是我表达感谢的方式。
哦，事后看你的代表，你可以拿-50分。

标签： python testing selenium selenium-webdriver protractor

【解决方案1】：

Protractor 中没有这样的东西，但我们可以自己编写：

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

【讨论】：

【解决方案2】：

从Protractor v.0.22.0 开始，您可以使用 the new By.cssContainingText locator:

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

See the API reference.

【讨论】：

【解决方案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');

【讨论】：

【解决方案4】：

无需自己实现 :)。我们编写了一个库，其中包含 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 的类型。

【讨论】：