如何使用 Watir 自动化 Reactjs 下拉菜单答案

【问题标题】：How to automate Reactjs drop downs using Watir如何使用 Watir 自动化 Reactjs 下拉菜单
【发布时间】：2018-11-28 13:17:31
【问题描述】：

目前，我正在使用 reactjs web 应用程序，它在整个应用程序中有许多下拉菜单，正常的下拉（选择）方法不起作用，因为选择的选项是从 react 下拉组件动态加载的，但目前我尝试使用这样的击键进行整理：

@browser.text_field(name: "countries").set("Germany");sleep1
@browser.text_field(name: "countries").send_keys :enter

我正在写入文本字段并等到预期的文本出现然后使用击键。

下面是 HTML，我知道它没有任何帮助：

<div class="Select-input" style="display: inline-block;"><input name="countries" data-test-id="countries" autocomplete="0" aria-activedescendant="react-select-7--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;"><div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: &quot;Open Sans&quot;, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div></div>

但是，我认为这不是最好的解决方案，任何建议或解决方案都会很有帮助。

【问题讨论】：

如果您可以分享您正在使用的下拉菜单的确切实现（例如，一个独立的示例或演示页面），将会有所帮助。有许多库可以进行下拉和自动完成 - 每个库都有它们通过 Watir 进行自动化的不同之处。但是，一般方法将与您的方法相同。
我会尽快分享实现的，谢谢。

标签： reactjs watir

【解决方案1】：

您需要在该选项而不是文本字段上传递回车键。可能是这样的。

 @browser.text_field(name: "countries").set("Germany");sleep1
 @browser.element(text: "Germany").send_keys :enter

你不需要传递回车键来更具体，你可以触发点击。

 @browser.text_field(name: "countries").set("Germany");sleep1
 @browser.element(text: "Germany").click

【讨论】：