Select -> option abstraction

0
0

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?.

  • You must to post comments
0
0

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

  • You must to post comments
Showing 1 result
Your Answer
Post as a guest by filling out the fields below or if you already have an account.
Name*
E-mail*
Website