gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 03:11:18 25 4
gpt4 key购买 nike

我几个小时以来一直在阅读不同的答案,但找不到使用 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>

非常感谢!

最佳答案

代码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 兼容性级别等)。

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

关于javascript - 如何使用 Capybara 和 Select2 v3.5.4 进行选择和元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46940819/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com