Question

我已经阅读了几个小时的不同答案，但找不到使用select2和Capybara（Webkit驱动程序）进行测试的解决方案。

我想从select2中选择一个选项，然后检查某个元素值是否已更改（选择和选项会触发事件以向视图中的数字添加费用）。问题是我不知道如何选择元素来触发js事件，因为做这样的事情适用于select但不会触发js事件：

select('VISA 4242 2020/10').select_option

（我已将Capybara驱动程序设置为使用Webkit Javascript驱动程序）

这是点击选择输入之前的html（容器已关闭）：

<fieldset class="form-group">
  <label for="source_id">Payment Method</label>
  <select name="source_id" id="js-payment-method" required="required" autofocus="autofocus" class="form-control normal-select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    <option value="">Select a payment method</option>
    <option value="ba_1">TEST BANK 6789 </option>
    <option value="card_1">VISA 4242 2021/4</option>
    <option value="ba_2">TEST BANK 1116 </option>
  </select>
  <span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 100px;">
    <span class="selection">
      <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-js-payment-method-container">
        <span class="select2-selection__rendered" id="select2-js-payment-method-container" title="VISA 4242 2021/4">
          <span class="select2-selection__placeholder">Search...</span>
        </span>
        <span class="select2-selection__arrow" role="presentation">
          <b role="presentation"></b>
        </span>
      </span>
   </span>
   <span class="dropdown-wrapper" aria-hidden="true"></span>
  </span>
</fieldset>

这是单击选择输入（容器打开）后的html：

<fieldset class="form-group">
  <label for="source_id">Payment Method</label>
  <select name="source_id" id="js-payment-method" required="required" autofocus="autofocus" class="form-control normal-select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    <option value="">Select a payment method</option>
    <option value="ba_1">TEST BANK 6789 </option>
    <option value="card_1">VISA 4242 2021/4</option>
    <option value="ba_2">TEST BANK 1116 </option>
  </select>
  <span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100px;">
    <span class="selection">
      <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-js-payment-method-container" aria-owns="select2-js-payment-method-results" aria-activedescendant="select2-js-payment-method-result-1rcw-card_1">
        <span class="select2-selection__rendered" id="select2-js-payment-method-container" title="TEST BANK 6789 ">
          <span class="select2-selection__placeholder">Search...</span>
        </span>
        <span class="select2-selection__arrow" role="presentation">
          <b role="presentation"></b>
        </span>
      </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
  </span>
</fieldset>

非常感谢！

Answer 1

代码select('VISA 4242 2020/10').select_option在Capybara没有任何意义。 select('VISA 4242 2020/10')会选择包含文字＆＃39; VISA 4242 2020/10＆＃39;的选项元素。并返回该选项元素，然后再次调用select_option。所以它只会尝试两次选择相同的选项。如果您正在处理普通的HTML选择，那么调用select('VISA 4242 2020/10', from: 'js-payment-method')会更有意义。这会在<option>元素中找到相关的<select>，其ID为＆＃39; js-payment-method＆＃39;然后选择它（在这个答案的底部看到更多相关信息）。

话虽如此，您还没有处理正常的HTML <select>元素，您正在处理正在替换该选择的JS小部件。如果您在浏览器中检查页面，则会发现实际的<select>元素不可见，因此您无法使用select方法。处理JS小部件时的规则就是完全按照用户的要求去做。在这种情况下，可以单击JS小部件，然后单击出现的正确选项。您没有显示单击窗口小部件时显示的下拉列表的实际HTML（它会动态附加到文档的末尾），但有些内容

find('span.select2-selection__arrow').click # click on the dropdown arrow to open the selection choices
find('li.select2-results__option', text: 'VISA 4242 2021/4').click # click on the option to select it

应该可行（如果您更改了默认的select2配置，则可能需要调整类名）。

注意：根据您的描述，代码select('VISA 4242 2020/10').select_option应该引发一个关于无法找到元素的错误（因为选择被隐藏）。它无法成为

的原因

你已经将Capybara从忽略隐藏元素的默认设置中改变了（为应用测试做错的想法）
您实际上并未使用capybara-webkit作为此测试的驱动程序
导致页面上的JS无法运行时出现错误（JS语法错误，无法转换/填充到capybara-webkit所需的ES5兼容级别等）。

因此，如果您还没有完成其中的第一个，那么您可能需要查看其他两个（如果您已经完成了第一次考虑，如果您希望测试有意义，请考虑恢复它。）

如何使用Capybara和Select2 v3.5.4选择和元素

这是点击选择输入之前的html（容器已关闭）：

这是单击选择输入（容器打开）后的html：

1 个答案: