Question

我们正在使用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

Answer 1

我们在Selenium Slack的Watir频道就此问题进行了对话。结论是React没有认识到Selenium命令实际上是在进行更改，因此虚拟DOM的值正在被重新渲染。

这可能不是最佳（或长期）解决方案，但他通过在元素上使用Browser#execute_script来解决它：

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

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

Answer 2

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

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

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

使用Watir输入的文本不断消失

2 个答案: