python - locators - Seleccione-> opción abstracción
protractor vs selenium (4)
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. .
Al iniciar
Protractor v.0.22.0
, puede usar
el nuevo localizador
By.cssContainingText
:
element(by.cssContainingText(''option'', ''Mango''));
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.
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
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'');