用 Watir 输入的文字不断消失答案

【问题标题】：Text entered with Watir keeps disappearing用 Watir 输入的文字不断消失
【发布时间】：2017-03-13 22:00:36
【问题描述】：

我们正在使用 react 并在我们的地址表单中为省文本字段提供以下代码：

<input name="province" class="form-control" id="province" value="" type="text">

当您手动选择字段时，会出现一个蓝色轮廓，表明该字段具有焦点。在输入 AB 或 Alberta 然后将焦点移至另一个字段后，省文本将更改为 ALBERTA。使用 Watir-Webdriver 时，我可以使用 .set 方法在此字段中输入文本，它的工作方式与手动输入文本相同。我最近不得不升级到 Watir 6.2.0，不再需要 Watir-Webdriver，只需要 Watir。现在，当我运行我的代码并将省字段设置为 AB 或 Alberta 时，当我将焦点放在另一个字段时，输入到省字段中的文本被空白。如果我在测试运行时手动单击该字段，则替换有效。 Watir 似乎不再像 Watir-Webdriver 那样专注于这个领域。我尝试了以下方法来集中注意力：

BROWSER.text_field(:id => 'city').send_keys :tab #tab from previous field
BROWSER.text_field(:id => 'province').fire_event :onmousedown
BROWSER.text_field(:id => 'province').fire_event :onmouseup
BROWSER.text_field(:id => 'province').fire_event :onblur
BROWSER.text_field(:id => 'province').fire_event :onfocus
BROWSER.text_field(:id => 'province').click

我尝试了 .set 和 .send_keys 来输入文本。从我使用 Watir-Webdriver 开始，开发人员没有对这种形式进行任何更改。 Watir 改变了我不能再让这个省字段像 Watir-Webdriver 那样表现的任何想法？我仍然像使用 Watir-Webdriver 一样使用 Firefox 浏览器：

BROWSER = Watir::Browser.new :firefox

【问题讨论】：

标签： watir watir-webdriver

【解决方案1】：

我们在 Watir 频道的 Selenium Slack 上讨论了这个问题。结论是 React 没有将 Selenium 命令识别为实际进行了更改，因此正在重新渲染来自虚拟 DOM 的值。

这可能不是最好的（或长期的）解决方案，但他通过在元素上使用Browser#execute_script 解决了这个问题：

var triggerChange = function(element) {
  var event = new Event('input', { bubbles: true });
  element.dispatchEvent(event);
}
triggerChange(arguments[0])

我们可能需要弄清楚如何在 Watir 中构建一些自动执行此操作的东西。

【讨论】：

我有点糊涂了，难道watir-webdriver也用了selenium webdriver吗？那有什么区别呢？
好吧，watir-webdriver 已被弃用，仅支持 watir 。但是，是的，Watir 将 Selenium 命令发送到浏览器驱动程序或适用的 Selenium 服务器。
是的，但他说 watir-webdriver 完成了最近 watir 未能完成的工作，所以我问 watir-webdriver 也使用了硒，对吗？那么，为什么他在使用 watir-webdriver 的时候没有出现这个问题呢？
啊，是的，它也使用了 selenium，但是 Watir 6.0 添加了许多可以改变加载方式的功能和优化。
我很确定这与 React 对虚拟 DOM 所做的事情有关，而不是 Watir/Selenium 所做的事情。

【解决方案2】：

这可能不是最漂亮的解决方法，但我们能够使用以下 java 脚本来解决此问题。

browser.execute_script("$('textarea#NameOfTextArea').val('#{text_to_enter}')")

我使用了 textarea，在您的情况下，您可能希望将其更改为“text_field”。

【讨论】：