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?.
No need to implement it on you own :). We wrote a library which includes 3 ways to select an option:
Additional feature of this functions is that they wait for the element to be displayed before any action on the
select
is performed.You can find it on npm @hetznercloud/protractor-test-helper. Typings for TypeScript are provided.
Starting Protractor v.0.22.0 you can just use the new
By.cssContainingText
locator:See the API reference.
Code with Typescript:
Tagname:
Used:
No such thing in Protractor, but we can write our own:
select-wrapper.js
Usage
Note that Select is a reserved word in JavaScript