如何使用 Watir 将文本输入到 react-selectize-control

Question

我在页面上有以下代码：

 <div class="col-md-5 col-lg-3">
  <div class="react-selectize bootstrap3 root-node simple-select open">
   <div class="react-selectize-control">
    <div class="react-selectize-placeholder">testing!</div>
     <div class="react-selectize-search-field-and-selected-values">
      <input class="resizable-input" style="width: 4px;" type="input">

如果我物理选择输入字段，然后使用 watir-classic 运行以下命令：

BROWSER.div(:class => 'col-md-5 col-lg-3')
       .div(:class => 'react-selectize-search-field-and-selected-values')
       .text_field(:class => 'resizable-input')
       .send_keys('Magg')

它将在字段中输入Magg，但如果我不手动选择字段，我似乎无法输入文本。

我尝试了以下方法：

BROWSER.div(:class => 'col-md-5 col-lg-3')
       .div(:class => 'react-selectize-search-field-and-selected-values')
       .text_field(:class => 'resizable-input')

与

.set('Magg')
.fire_event('onfocus')
.fire_event('mousedown')
.fire_event('mouseup')

使用

.parent.text_field(:class => 'resizable-input')
.parent.input(:class => 'resizable-input').set('Magg')
.input(:class => 'resizable-input').set('Magg')
.input(:class => 'resizable-input').send_keys('Magg')

我一直在与使用控件的开发人员合作，但我们都无法弄清楚如何赋予控件焦点，以便 send_keys 在不手动选择控件的情况下工作。任何指导将不胜感激。

Answer 1

首先 - 强制警告 Watir Classic 已弃用，您应该使用 Watir WebDriver。 （可能会解决此问题）

第二 - 从技术上讲：div(:class => 'col-md-5 col-lg-3') 应该是 div(:css => '.col-md-5.col-lg-3')，因为类应该是单数的。

你试过在element.set之前只做element.fire_event(:click)吗？

Answer 2

请注意，您的 HTML 中输入标记的“类型”值无效。根据W3.org，“输入”的类型不是输入标签的有效类型选择。

这可能是导致您期望工作的方法（例如.set）失败的原因。这也意味着返回更具体的输入子类型（例如.text_field）的所有 watir 方法都无法选择该标签。

Watir根据输入标签的具体子类型定义了具体的输入相关方法（如.set、.unset），并具有选择这些具体输入类型的方法（如.button）。通常你会使用它的子类型的方法来选择一个输入标签，但是因为那个值是无效的，在这种情况下这不是一个选项，你不得不使用.input。但正如我们刚刚讨论的，watir 中的输入对象没有定义像 .set 这样的方法。所以你唯一的后备是使用 .sendkeys 将击键发送到元素。

如果是我，我会在那个 HTML 上写一个错误，它没有根据 W3 规范为“类型”使用正确的值。

将 HTML 修复为有效可能会使其与 Watir 或任何其他自动化工具（尤其是基于 webdriver 的自动化工具）一起工作得更好。