如何选择元素以进行硒的模态反应选择 [英] How to select elements for react select on modal for selenium
本文介绍了如何选择元素以进行硒的模态反应选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下是我要执行的操作: 该项目是使用ReactJS构建的,我正在将Selenium WebDriver与Java结合使用.
Following is what I am trying to do: Project is built with ReactJS, I am using Selenium WebDriver with Java.
- 单击按钮(我可以做到)
- 这将打开一个具有反应选择组件的模态.
我要在此选择中选择一个元素.
I want to select an element in this select.
HTML代码:
<div class="row">
<div class="col-xs-7">
<div class="Select kpi-select is-searchable Select--single">
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-19--value">
<div class="Select-placeholder">Select KPI</div>
<div class="Select-input" style="display: inline-block;">
<input id="add-kpi-kpi-select" aria-activedescendant="react-select-19--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: 14px; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 300; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
</div>
</span>
<span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="Select kpi-select is-searchable Select--single">
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-20--value">
<div class="Select-placeholder">Select Time Period</div>
<div class="Select-input" style="display: inline-block;">
<input id="add-kpi-timeperiod-select" aria-activedescendant="react-select-20--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: 14px; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 300; font-style: normal; letter-spacing: normal; text-transform: none;">
</div>
</div>
</span>
<span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>
</div>
</div>
</div>
屏幕截图:
推荐答案
用于选择KPI的Java代码
Java code to choose KPI
String wantedOption = "wanted KPI";
// click the down arrow to expand options
driver.findElement(By.cssSelecor("div.Select.kpi-select span.Select-arrow")).click();
// select wanted KPT
driver.findElement(By.cssSelector("div.Select.kpi-select div.Select-menu"))
.findElement(By.xpath(String.format(".//div[text()='%s']", wantedOption)))
.click();
通过在点击事件上添加断点来不断扩展选项的指南:
Guide to make options keep expand through add break point on click event:
- 打开Chrome DevTool
- 切换到
Sources
标签 -
请按照以下所示的步骤进行操作
- Open Chrome DevTool
- Switch to
Sources
Tab Follow steps as below shown
单击页面上的Select KPI
下拉列表
这篇关于如何选择元素以进行硒的模态反应选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文