Select & # 8594; option abstraction

Question

In Python, Java, and several other selenium bindings, there is a very convenient abstraction over the HTML constructs select->option , Select class .

For example, imagine that there is a Select tag:

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

Here's how we can work in 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') 

In other words, this is a very transparent and easy to use abstraction.

Can I manipulate the Select tag with a tag in the transporter in a similar way?

---

^{This is not a duplicate. How to choose an option for Protractorjs e2e drop-down tests or How to click an option in the selection field in the Protractor test? .}

Answer 1

There is no such thing in the Transporter, but we can write our own:

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; 

Using

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

Note that Select is a reserved word in JavaScript

Answer 2

Starting Protractor v.0.22.0 you can simply use the new By.cssContainingText locator :

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

See the API link .

Answer 3

Code with Typescript:

Tag:

by.tagName ('parameter')

by.tagName ('mkr-variant')

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

B

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