如何使用 mocha、node 和 selenium 集成测试 react-select 多选下拉菜单？答案

【问题标题】：How to integration test react-select multi select drop down menu using mocha, node, and selenium?如何使用 mocha、node 和 selenium 集成测试 react-select 多选下拉菜单？
【发布时间】：2019-05-22 02:43:45
【问题描述】：

我在我的代码中使用react-select V2 并使用多选，我的组件如下所示：

 <Select 
      isMulti 
      className="basic-multi-select"
      classNamePrefix="select"
      options={ this.getTransformedOptions() }
      components={{ Placeholder, DropdownIndicator }}
      placeholder={this.props.placeholderText}
      onChange={this.props.onChange('multi')}
 />

我使用 mocha、node、selenium 和 chrome 驱动程序为我的应用程序创建集成测试，所以对于这个页面，我想简单地测试打开下拉菜单、选择一些选项、删除一些选项等。

如果我将menuIsOpen={true} 传递给组件，我可以使用以下命令轻松单击该元素：

driver.findElement(By.css('.select__menu div[id="react-select-2-option-0"]')).click();

但是，我仍然无法以编程方式单击打开菜单。有谁知道我如何使用与上述类似的命令来做到这一点？

【问题讨论】：

发布呈现的 HTML。这就是 Selenium 将与之交互的内容。

标签： node.js selenium mocha.js react-select

【解决方案1】：

我能够通过使用 selenium actions 和 mouseDown 方法解决问题，如下所示：

driver.wait(until.elementLocated(By.css('div.select__dropdown-indicator')), TEST_TIMEOUT);
currentElement = driver.findElement(By.css("div.select__dropdown-indicator"));
driver.actions().mouseDown(currentElement).click().perform(); // expand drop down menu
currentElement = driver.findElement(By.className("select__input"));
driver.actions().mouseDown(currentElement).click().perform();
driver.findElement(By.css('.select__menu div[id="react-select-2-option-0"]')).click();

【讨论】：

【解决方案2】：

要打开您应该定位的菜单是下拉图标。

使用 xPath 它看起来像：

//div[contains(@class, 'here__your__className')]//div[contains(@class, 'your__prefix__indicators')]

使用css：

driver.findElement(By.css('.your__prefix__indicators')).click();

【讨论】：

谢谢@Laura，问题，我如何找到我的your__prefix__indicators？如果我按照您的建议查找下拉图标，我会得到一个带有类css-16pqwjk-indicatorContainer select__indicator select__dropdown-indicator 的div，但是当我尝试在此元素上使用click() 时，它不会扩展菜单选项。我还尝试了带有select__indicators 类的父div，但这也不起作用。有什么想法吗？
@thehme 可以改进您的示例，因为我执行上面的代码没有任何问题，所以我怀疑它特定于您的用例。