Использование Capybara с Webkit, чтобы выбрать опцию из Chosen Мультиселектор

Question

У меня есть Мультиселектор, который использует плагин Избранным, как показано ниже:

<%= select_tag :provinces, 
options_for_select(DataHelper::all_provinces_captions.zip(DataHelper::all_provinces_ids)), 
{:multiple => true, class: 'chosen-select chzn-select', 
:data => {:placeholder => 'Filter Provinces/States'}, 
:style => "width: 100%; height: 100px;"}%> 

Вот соответствующие массивы выбора DataHelper:

def self.all_provinces_captions 
    usa_provinces_with_caption.map { |x| x.first } + canada_provinces_with_caption.map { |x| x.first } 
end 
def self.all_provinces_ids 
    usa_provinces_with_caption.map { |x| (Province.find_by name: x.first).id} + canada_provinces_with_caption.map { |x| (Province.find_by name: x.first).id } 
end 
def self.usa_provinces_with_caption 
     [["Alabama", "alabama"], ["Alaska", "alaska"], ["Arizona", "arizona"], ["Arkansas", "arkansas"], ["California", "california"], ["Colorado", "colorado"], ["Connecticut", "connecticut"], ["Delaware", "delaware"], ["District Of Columbia", "district of columbia"], ["Florida", "florida"], ["Georgia", "georgia"], ["Hawaii", "hawaii"], ["Idaho", "idaho"], ["Illinois", "illinois"], ["Indiana", "indiana"], ["Iowa", "iowa"], ["Kansas", "kansas"], ["Kentucky", "kentucky"], ["Louisiana", "louisiana"], ["Maine", "maine"], ["Maryland", "maryland"], ["Massachusetts", "massachusetts"], ["Michigan", "michigan"], ["Minnesota", "minnesota"], ["Mississippi", "mississippi"], ["Missouri", "missouri"], ["Montana", "montana"], ["Nebraska", "nebraska"], ["Nevada", "nevada"], ["New Hampshire", "new hampshire"], ["New Jersey", "new jersey"], ["New Mexico", "new mexico"], ["New York", "new york"], ["North Carolina", "north carolina"], ["North Dakota", "north dakota"], ["Ohio", "ohio"], ["Oklahoma", "oklahoma"], ["Oregon", "oregon"], ["Pennsylvania", "pennsylvania"], ["Rhode Island", "rhode island"], ["South Carolina", "south carolina"], ["South Dakota", "south dakota"], ["Tennessee", "tennessee"], ["Texas", "texas"], ["Utah", "utah"], ["Vermont", "vermont"], ["Virginia", "virginia"], ["Washington", "washington"], ["West Virginia", "west virginia"], ["Wisconsin", "wisconsin"], ["Wyoming", "wyoming"]] 
end 
def self.canada_provinces_with_caption 
     [["Alberta", "alberta"], ["British Columbia", "british columbia"], ["Manitoba", "manitoba"], ["New Brunswick", "new brunswick"], ["Newfoundland", "newfoundland"], ["Northwest Territories", "northwest territories"], ["Nova Scotia", "nova scotia"], ["Nunavut", "nunavut"], ["Ontario", "ontario"], ["Prince Edward Island", "prince edward island"], ["Quebec", "quebec"], ["Saskatchewan", "saskatchewan"], ["Yukon", "yukon"]] 
end 

Как выбрать опцию из этого выбранного селектора в тесте интеграции Capybara на платформе Ruby on Rails? Я попробовал обычный метод выбора, и это не работает, а также метод Capybara для заполнения текстовых полей - и это тоже не сработало для меня.

HTML, что выбранный плагин создает из Еврорадио:

<select name="provinces[]" id="provinces" multiple="multiple" class="chosen-select chzn-select" data-placeholder="Filter Provinces/States" style="width: 100%; height: 100px; display: none;" data-original-title="" title=""> 
<option value="420860745" data-original-title="" title="">Alabama</option> 
<option value="121193182" data-original-title="" title="">Alaska</option> 
<option value="614988510" data-original-title="" title="">Arizona</option> 
<option value="1011954550" data-original-title="" title="">Arkansas</option> 
<option value="51576297" data-original-title="" title="">California</option> 
<option value="911438059" data-original-title="" title="">Colorado</option> 
<option value="29252426" data-original-title="" title="">Connecticut</option> 
<option value="742732841" data-original-title="" title="">Delaware</option> 
<option value="335579331" data-original-title="" title="">District Of Columbia</option> 
<option value="743108299" data-original-title="" title="">Florida</option> 
<option value="302180340" data-original-title="" title="">Georgia</option> 
<option value="245056076" data-original-title="" title="">Hawaii</option> 
<option value="528006663" data-original-title="" title="">Idaho</option> 
<option value="684024883" data-original-title="" title="">Illinois</option> 
<option value="335439766" data-original-title="" title="">Indiana</option> 
<option value="1042961784" data-original-title="" title="">Iowa</option> 
<option value="252128415" data-original-title="" title="">Kansas</option> 
<option value="908162754" data-original-title="" title="">Kentucky</option> 
<option value="884793715" data-original-title="" title="">Louisiana</option> 
<option value="633010136" data-original-title="" title="">Maine</option> 
<option value="945883618" data-original-title="" title="">Maryland</option> 
<option value="436583221" data-original-title="" title="">Massachusetts</option> 
<option value="177885659" data-original-title="" title="">Michigan</option> 
<option value="935527986" data-original-title="" title="">Minnesota</option> 
<option value="312520863" data-original-title="" title="">Mississippi</option> 
<option value="457050403" data-original-title="" title="">Missouri</option> 
<option value="70125510" data-original-title="" title="">Montana</option> 
<option value="376616596" data-original-title="" title="">Nebraska</option> 
<option value="780899985" data-original-title="" title="">Nevada</option> 
<option value="689473862" data-original-title="" title="">New Hampshire</option> 
<option value="389522924" data-original-title="" title="">New Jersey</option> 
<option value="380649796" data-original-title="" title="">New Mexico</option> 
<option value="125610863" data-original-title="" title="">New York</option> 
<option value="255810450" data-original-title="" title="">North Carolina</option> 
<option value="428342329" data-original-title="" title="">North Dakota</option> 
<option value="771165943" data-original-title="" title="">Ohio</option> 
<option value="700707689" data-original-title="" title="">Oklahoma</option> 
<option value="41766435" data-original-title="" title="">Oregon</option> 
<option value="943799741" data-original-title="" title="">Pennsylvania</option> 
<option value="764139748" data-original-title="" title="">Rhode Island</option> 
<option value="720371240" data-original-title="" title="">South Carolina</option> 
<option value="703335251" data-original-title="" title="">South Dakota</option> 
<option value="562518602" data-original-title="" title="">Tennessee</option> 
<option value="696317355" data-original-title="" title="">Texas</option> 
<option value="299039922" data-original-title="" title="">Utah</option> 
<option value="791562217" data-original-title="" title="">Vermont</option> 
<option value="908498527" data-original-title="" title="">Virginia</option> 
<option value="303977536" data-original-title="" title="">Washington</option> 
<option value="512750023" data-original-title="" title="">West Virginia</option> 
<option value="647404661" data-original-title="" title="">Wisconsin</option> 
<option value="621732077" data-original-title="" title="">Wyoming</option> 
<option value="100803856" data-original-title="" title="">Alberta</option> 
<option value="950914246" data-original-title="" title="">British Columbia</option> 
<option value="796505466" data-original-title="" title="">Manitoba</option> 
<option value="536137098" data-original-title="" title="">New Brunswick</option> 
<option value="4906295" data-original-title="" title="">Newfoundland</option> 
<option value="65026714" data-original-title="" title="">Northwest Territories</option> 
<option value="784270339" data-original-title="" title="">Nova Scotia</option> 
<option value="768475533" data-original-title="" title="">Nunavut</option> 
<option value="602098473" data-original-title="" title="">Ontario</option> 
<option value="668705057" data-original-title="" title="">Prince Edward Island</option> 
<option value="185902858" data-original-title="" title="">Quebec</option> 
<option value="318605132" data-original-title="" title="">Saskatchewan</option> 
<option value="585906940" data-original-title="" title="">Yukon</option></select> 

Последовал второй части:

<div class="chosen-container chosen-container-multi" style="width: 277px;" title="" id="provinces_chosen" data-original-title=""> 
    <ul class="chosen-choices" data-original-title="" title=""> 
    <li class="search-field" data-original-title="" title=""> 
     <input type="text" value="Filter Provinces/States" class="default" autocomplete="off" style="width: 155px;" data-original-title="" title=""> 
     </li> 
    </ul> 
<div class="chosen-drop" data-original-title="" title=""> 
    <ul class="chosen-results" data-original-title="" title=""> 
    <li class="active-result" data-option-array-index="0">Alabama</li> 
    <li class="active-result" data-option-array-index="1">Alaska</li> 
    <li class="active-result" data-option-array-index="2">Arizona</li> 
    <li class="active-result" data-option-array-index="3">Arkansas</li> 
    <li class="active-result" data-option-array-index="4">California</li> 
    <li class="active-result" data-option-array-index="5">Colorado</li> 
    <li class="active-result" data-option-array-index="6">Connecticut</li> 
    <li class="active-result" data-option-array-index="7">Delaware</li> 
    <li class="active-result" data-option-array-index="8">District Of Columbia</li> 
    <li class="active-result" data-option-array-index="9">Florida</li> 
    <li class="active-result" data-option-array-index="10">Georgia</li> 
    <li class="active-result" data-option-array-index="11">Hawaii</li> 
    <li class="active-result" data-option-array-index="12">Idaho</li> 
    <li class="active-result" data-option-array-index="13">Illinois</li> 
    <li class="active-result" data-option-array-index="14">Indiana</li> 
    <li class="active-result" data-option-array-index="15">Iowa</li> 
    <li class="active-result" data-option-array-index="16">Kansas</li> 
    <li class="active-result" data-option-array-index="17">Kentucky</li> 
    <li class="active-result" data-option-array-index="18">Louisiana</li> 
    <li class="active-result" data-option-array-index="19">Maine</li> 
    <li class="active-result" data-option-array-index="20">Maryland</li> 
    <li class="active-result" data-option-array-index="21">Massachusetts</li> 
    <li class="active-result" data-option-array-index="22">Michigan</li> 
    <li class="active-result" data-option-array-index="23">Minnesota</li><li class="active-result" data-option-array-index="24">Mississippi</li> 
    <li class="active-result" data-option-array-index="25">Missouri</li> 
    <li class="active-result" data-option-array-index="26">Montana</li> 
    <li class="active-result" data-option-array-index="27">Nebraska</li> 
    <li class="active-result" data-option-array-index="28">Nevada</li> 
    <li class="active-result" data-option-array-index="29">New Hampshire</li> 
    <li class="active-result" data-option-array-index="30">New Jersey</li> 
    <li class="active-result" data-option-array-index="31">New Mexico</li> 
    <li class="active-result" data-option-array-index="32">New York</li> 
    <li class="active-result" data-option-array-index="33">North Carolina</li> 
    <li class="active-result" data-option-array-index="34">North Dakota</li> 
    <li class="active-result" data-option-array-index="35">Ohio</li> 
    <li class="active-result" data-option-array-index="36">Oklahoma</li> 
    <li class="active-result" data-option-array-index="37">Oregon</li> 
    <li class="active-result" data-option-array-index="38">Pennsylvania</li> 
    <li class="active-result" data-option-array-index="39">Rhode Island</li> 
    <li class="active-result" data-option-array-index="40">South Carolina</li> 
    <li class="active-result" data-option-array-index="41">South Dakota</li> 
    <li class="active-result" data-option-array-index="42">Tennessee</li> 
    <li class="active-result" data-option-array-index="43">Texas</li> 
    <li class="active-result" data-option-array-index="44">Utah</li> 
    <li class="active-result" data-option-array-index="45">Vermont</li> 
    <li class="active-result" data-option-array-index="46">Virginia</li> 
    <li class="active-result" data-option-array-index="47">Washington</li> 
    <li class="active-result" data-option-array-index="48">West Virginia</li><li class="active-result" data-option-array-index="49">Wisconsin</li> 
    <li class="active-result" data-option-array-index="50">Wyoming</li> 
    <li class="active-result" data-option-array-index="51">Alberta</li> 
    <li class="active-result" data-option-array-index="52">British Columbia</li> 
    <li class="active-result" data-option-array-index="53">Manitoba</li> 
    <li class="active-result" data-option-array-index="54">New Brunswick</li> 
    <li class="active-result" data-option-array-index="55">Newfoundland</li> 
    <li class="active-result" data-option-array-index="56">Northwest Territories</li> 
    <li class="active-result" data-option-array-index="57">Nova Scotia</li> 
    <li class="active-result" data-option-array-index="58">Nunavut</li> 
    <li class="active-result" data-option-array-index="59">Ontario</li> 
    <li class="active-result" data-option-array-index="60">Prince Edward Island</li> 
    <li class="active-result" data-option-array-index="61">Quebec</li> 
    <li class="active-result" data-option-array-index="62">Saskatchewan</li> 
    <li class="active-result" data-option-array-index="63">Yukon</li> 
    </ul> 
</div> 

Надежда выше информация поможет!

Answer 1

Чтобы использовать виджет, управляемый JS, вам нужно, чтобы Capybara выполнял то, что пользователь должен был бы сделать. В этом случае щелкните мышью на контейнере, из-за чего виджет отобразит выпадающий список, а затем щелкните элемент, который вы хотите, из раскрывающегося списка. Для вашего HTML, который будет что-то вроде

find('#provinces_chosen .chosen-choices').click 
find('.chosen-results .active-result', text: 'Alabama').click 

Первая линия может на самом деле нужно быть

find('#provinces_chosen .chosen-choices .search-field').click 

, так как это множественный выбор, чтобы работать для вас второго и третьего вариантов - достаточно легко проверить ,