使用Capybara和Webkit从选择的Multislector中选择一个选项

Question

我有一个使用Chosen插件的多重选择器，如下所示：

<%= 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

如何在Ruby on Rails框架的Capybara集成测试中从这个选择的选择器中选择一个选项？我已经尝试过传统的选择器方法，但是没有用，以及填充文本框的Capybara方法 - 这对我来说也没用。

Chosen插件从ERB创建的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 

因为它是一个多项选择，可以继续为你选择第二和第三选择 - 很容易测试。