python - locators - Seleccione-> opción abstracción

protractor vs selenium

Question

En Python, Java y varios otros enlaces de selenio, hay una abstracción muy conveniente sobre las construcciones HTML de select->option , una clase Select .

Por ejemplo, imagine que hay la siguiente etiqueta de select :

<select id="fruits" class="select" name="fruits">
    <option value="1">Banana</option>
    <option value="2">Mango</option>
</select>

Así es como podemos operarlo en 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'')

En otras palabras, es una abstracción muy transparente y fácil de usar .

¿Es posible manipular la etiqueta de select en el transportador de manera similar?

^{Este no es un duplicado de cómo seleccionar la opción en las pruebas desplegables de protractorjs e2e o cómo hacer clic en la opción en el cuadro de selección en la prueba de transportador. .}

Answer 1

Al iniciar Protractor v.0.22.0 , puede usar el nuevo localizador By.cssContainingText :

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

Ver la referencia de la API .

Answer 2

No es necesario implementarlo por tu cuenta :). Escribimos una biblioteca que incluye 3 formas de seleccionar una opción:

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>

La característica adicional de estas funciones es que esperan a que se muestre el elemento antes de realizar cualquier acción en la select .

Puede encontrarlo en npm @hetznercloud/protractor-test-helper . Se proporcionan los tipos para TypeScript.

Answer 3

No existe tal cosa en Protractor, pero podemos escribir el nuestro:

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;

Uso

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

Tenga en cuenta que Seleccionar es una palabra reservada en JavaScript

Answer 4

Código con mecanografiado:

Nombre de etiqueta:

by.tagName (''opción'')

by.tagName (''opción-md'')

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

Usado:

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