设置了 Capybara 值的竞争条件

Question

我在使用 .set(#{value}) 填写注册表单中的文本字段时遇到问题，例如：我想输入的 phone 数字是 506307 然后它以063075。我所做的解决方法是执行 Javascript 块，如

execute_script("document.querySelector('#{selector}').value = '#{value}'")

但是，使用基于React.JS申请Webmobile的相同脚本，上面的脚本只是发送文本，没有发送onChange事件，导致另一个元素不能selected/clicked -> 使测试失败。

我想出另一种方法是使用 send_keys #{value} 触发按键事件，这会使浏览器认为该表单发生了按键事件，但最终以竞争告终-条件就像我提到的 set(#{value}) 一样。

另一种解决方法是使用 What is the best way to trigger onchange event in react js ，但我倾向于在进行棘手操作之前使用原生水豚动作 Javascript.

那么，有没有其他方法可以交互/填写表单字段而不会导致竞争条件问题？

提前谢谢大家。

Answer 1

注意：任何 "solution" 建议纯粹使用 execute_script 到运行一些 JS 是一个糟糕的想法，因为它完全绕过了测试用户可以做什么的概念并且基本上可以让你的测试变得毫无价值。

这里问题的根本原因是附加到输入的 JS 行为无法足够快地处理按键事件。正确的解决方法是修复 JS，但是如果这不可能，您可以尝试一些方法

首先你可以尝试改变set

使用的clear方法

element.set('506307', clear: :backspace)

或

element.set('506307', clear: :none)

如果这没有任何改变，请尝试单击输入，然后在设置内容之前短暂休眠

element.click
sleep 0.25
element.set('506307')

如果 none 解决了这个问题，我们需要确切地知道您附加到输入的 JS 行为是什么 and/or JS 行为正在监听什么事件。

Race condition with Capybara value set