javascript - 如何使用 Capybara 和 Select2 v3.5.4 进行选择和元素

Question

我几个小时以来一直在阅读不同的答案，但找不到使用 select2 和 Capybara(Webkit 驱动程序)进行测试的解决方案。

我想从 select2 中选择一个选项，然后检查某些元素值是否已更改(选择和选项会触发一个事件，以向 View 中的数字添加费用)。问题是我不知道如何选择元素来触发 js 事件，因为这样做对选择有效，但不会触发 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')将选择包含文本“VISA 4242 2020/10”的选项元素并返回该选项元素，然后将其称为 select_option再次开启。所以它只会尝试选择相同的选项两次。如果您正在处理普通的 HTML 选择，那么调用 select('VISA 4242 2020/10', from: 'js-payment-method') 会更有意义。 。那会找到相关的<option>里面<select> id 为“js- payment-method”的元素，然后选择它(请参阅此答案底部的更多信息)。

话虽如此，您处理的不是普通的 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应该会引发有关无法找到元素的错误(因为选择被隐藏)。不可能的原因

1. 您已更改了 Capybara 忽略隐藏元素的默认设置(在应用测试中这样做不是个好主意)
2. 您实际上并没有使用capybara-webkit作为本次测试的驾驶员
3. 存在错误，导致页面上的 JS 无法运行(JS 语法错误、未转换/填充到 capybara-webkit 所需的 ES5 兼容性级别等)。

因此，如果您还没有完成其中第一个，您可能需要研究其他两个(如果您已经完成了第一个，如果您希望测试有意义，请考虑恢复它)。