如何使用 Selenium IDE 处理 React Select 组件？

Question

我对 Selenium IDE 位置元素有疑问

这是链接： https: //jedwatson.github.io/react-select/

我用这个命令成功了：

Command: sendKeys
Target: css=div.Select-control input
Value: Victoria${KEY_ENTER}

但我不知道如何处理具有相同元素的下一个字段

<div class="Select-placeholder">Select...</div>

问题是如何使用 Selenium IDE 处理这个问题？

Answer 1

查看您的页面，您无法css=div.Select-placeholder input像第一个字段一样使用的原因是输入不是占位符元素的子元素。您需要使用像这样的 xpath//div[@class='Select-placeholder']/..//input来查找Select-placeholder元素，向上导航到父元素，然后查找输入。然而存在的问题是，有多个输入字段与此匹配。

您可以使用：(//div[@class='Select-placeholder'])[1]/..//input将“1”替换为您要定位的元素的任何实例，但如果可以的话，我建议修改页面本身的代码，以使每个输入字段具有唯一可识别性（例如添加 id 标签），因为它会使您的自动化不那么脆弱，并且如果需要更改这些输入的顺序/添加更多输入等，则可能会失败。