选择 -> 选项抽象化

Question

在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')

换句话说，它是一个非常透明且易于使用的抽象。

在Protractor中是否可能以类似的方式操作标签？ This is not a duplicate of 如何在Protractorjs的e2e测试中选择下拉选项或如何在Protractor测试中点击选择框中的选项。请注意，这不是重复内容。

- alecxe

---

为什么这需要赏金？ - tox123

@tox123 这是我表达感谢你给出好答案的方式。 - alecxe

哦，回过头看看你的声望，你可能会失去50分。 - tox123

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

请注意，在JavaScript中，Select是保留字

- Delian Mitankin

Answer 2

从Protractor v.0.22.0开始，您可以直接使用新的By.cssContainingText定位器：

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

查看API参考文档。

- Dmitri Zaitsev

Answer 3

不需要自己实现:). 我们编写了一个库，其中包括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 的类型定义。

- crashbus

Answer 4

使用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');

- Dao Minh Dam