Select -> option abstraction
protractor, python, selenium, selenium-webdriver, testing
Solution
No such thing in Protractor, 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;
Usage
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
Problem
In Python, Java and several other selenium bindings, there is a very convenient abstraction over `select->option` HTML constructions, a `Select` class. For example, imagine there is the following `select` tag: ``` <select id="fruits" class="select" name="fruits"> <option value="1">Banana</option> <option value="2">Mango</option> </select> ``` Here is how we can operate it 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, it is a very transparent and easy to use abstraction. Is is possible to manipulate `select` tag in protractor in a similar manner? This is not a duplicate of How to select option in drop down protractorjs e2e tests or How to click on option in select box in Protractor test?.