Выбрать -> абстракция опции

Question

В Python, Java и нескольких других привязках селена есть очень удобная абстракция над select->option HTML-конструкциями, Select class.

Например, представьте себе, есть следующие select тег:

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

Вот как мы можем управлять им в 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') 

Другими словами, это очень прозрачным и простая в использовании абстракция.

Возможно ли манипулировать select тегом в транспортирторе аналогичным образом?

---

^{Это не дубликат How to select option in drop down protractorjs e2e tests или How to click on option in select box in Protractor test?.}

Answer 1

Нет такой вещи в транспортир, но мы можем написать наши собственные:

выбрать-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; 

Использование

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

Обратите внимание, что Se Lect является reserved word in JavaScript

Answer 2

Начиная Protractor v.0.22.0 вы можете просто использовать the new By.cssContainingText locator:

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

See the API reference.

Answer 3

Код с Машинопись:

Tagname:

by.tagName ('вариант')

by.tagName ('мкр-вариант')

мимо. 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(); 
      } 
     }); 
} 

Использована

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