下拉菜单在 selenium 中不起作用 java
Dropdown not working in selenium java
我想单击显示在该特定选项列表中的选项，但我不能这样做。地理组是过滤器，除此之外，您还可以看到下拉图标，单击该图标后，我应该可以看到显示的两个选项，即 'APAC Delivery Center' 和 'GU'。我附上了图片。
下面是我的 UI 代码：
<div owner = "71"style="z-index: 666; left: 602px; top: 153px; width: 208px; height: 30px; position: absolute;"id="DS"class="QvFrame DS">
<div style = "height: 28px; width: 206px;"class="QvContent">
<div incontainer = "false"style="visibility: visible; position: relative; overflow: hidden; cursor: default; font-weight: normal; font-family: Arial; font-size: 8pt; font-style: normal; text-decoration: none; height: 28px; width: 206px;"objtype="Listbox"class="QvListbox">
<div style="position: relative; overflow: hidden; width: 206px; height: 28px;"><div class="QvOptional" title="APAC Delivery Center" unselectable="on" style="text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 206px; height: 14px;">
<div unselectable = "on"style="position: absolute; z-index: 1; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(220, 220, 220); left: 0px; top: 0px; width: 205px; height: 13px;"></div>
<div title = "APAC Delivery Center"unselectable="on"style="padding: 0px; width: 206px; height: 14px; white-space: pre;">
<div unselectable = "on"style="width: 2px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;"></div>
<div unselectable = "on"style="width: 202px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;">
APAC Delivery Center</div></div></div>
<div class="QvOptional"title="GU"unselectable="on"style="text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 14px; width: 206px; height: 14px;">
<div unselectable = "on"style="position: absolute; z-index: 1; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(220, 220, 220); left: 0px; top: 0px; width: 205px; height: 13px;"></div>
<div title = "GU"unselectable="on"style="padding: 0px; width: 206px; height: 14px; white-space: pre;">
<div unselectable = "on"style="width: 2px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;"></div>
<div unselectable = "on"style="width: 202px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;">GU</div></div></div></div>
<div style = "display: none; opacity: 1; right: auto; bottom: auto; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; border-radius: 3px; width: 9px; height: 9px; background-color: rgb(221, 221, 221);"class="TouchScrollbar"></div>
下面是我的下拉图标代码：
<div title="" class="cell-icon cell-ODDC-icon"></div>
我尝试使用以下代码，但问题仍未解决：
driver.findElement(By
.xpath("//div[@class='QvGrid'][@style='position: absolute; border-left: 0px solid rgb(255, 255, 255); border-right: 2px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(255, 255, 255); left: 0px; top: 0px; width: 11px; height: 13px;']"))
.click();
下面是 UI 代码，我尽力弄明白了，因为它非常复杂：
<div objtype="Grid" objsubtype="MB" style="z-index: 68; top: 92px; left: 390px; width: 422px; height: 219px; border-radius: 7px; border: 1px solid rgb(232, 232, 232);" id="180" class="QvFrame Document_MB18">
<div style="height: 217px; width: 420px; border-radius: 6px; background-color: rgb(255, 255, 255); overflow: visible;" class="QvContent">
<div incontainer="false" style="position: relative; overflow: hidden; cursor: default; font-weight: normal; font-family: Arial; font-size: 8pt; font-style: normal; text-decoration: none; width: 420px; height: 217px;" class="QvGrid">
<div style="position: relative; overflow: hidden; width: 408px; height: 205px;">
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 0px; height: 0px;">
<div class="page" page="0" style="position: absolute; height: 100%; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 0px; height: 205px;">
<div class="page" page="0" style="position: absolute; height: 224px; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; transition-duration: 0ms; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 205px; width: 0px; height: 0px;">
<div class="page" page="0" style="position: absolute; height: 100%; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 408px; height: 0px;">
<div class="page" page="0" style="position: absolute; height: 100%; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; transition-duration: 0ms; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 408px; height: 205px;">
<div class="page" page="0" style="position: absolute; height: 224px; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; transition-duration: 0ms; transform: translate(0px, 0px);">
<div unselectable="on" style="background-color: rgb(255, 255, 255); color: rgb(54, 54, 54); text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 198px; height: 14px;" title="Geographic Group">
<div unselectable="on" style="position: absolute; border-right: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); left: 0px; top: 0px; width: 197px; height: 13px;"></div>
<div class=" injected" style="padding: 0px 2px; width: 194px; height: 14px;">
<div title="Geographic Group" unselectable="on" style="width: 194px; white-space: pre; overflow: hidden; word-wrap: normal;">Geographic Group</div></div></div>
<div unselectable="on" style="background-color: rgb(255, 255, 255); color: rgb(54, 54, 54); text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 198px; top: 0px; width: 13px; height: 14px;" title="">
<div unselectable="on" style="position: absolute; border-left: 0px solid rgb(255, 255, 255); border-right: 2px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(255, 255, 255); left: 0px; top: 0px; width: 11px; height: 13px;"></div>
<div class=" injected" style="padding: 0px 2px; width: 9px; height: 14px;"><div style="width: 9px;"><div class="Qv_CellIcon_right" style="width: 14px; height: 13px; max-width: 9px; max-height: 13px;"><div title="" class="cell-icon cell-ODDC-icon"></div></div></div></div></div><div unselectable="on" style="background-color: rgb(248, 248, 248); color: rgb(54, 54, 54); text-align: center; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 211px; top: 0px; width: 208px; height: 14px;" title="">
即使我无法点击那个下拉图标，它也可以。我可以点击那个地理组前面的空白区域，它仍然会显示选项列表。
UI 我检查的那个空白区域的代码是：
<div unselectable="on" style="position: absolute; border-left: 0px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(210, 210, 210); left: 0px; top: 0px; width: 208px; height: 13px;"></div>
请帮我解决这个问题，或者如果您需要更清楚地了解这个问题，请告诉我。提前致谢:)
如果您想 select 从下拉列表中获取一些值，请使用 Select class
Select drp = new Select("xpath of dropdown");
Thread.sleep(5000);
drp.selectByVisibleText("value to be selected from dropdown");
这里我假设这是您的下拉路径 <div title="" class="cell-icon cell-ODDC-icon"></div>。如果这是正确的，那么你可以这样写。
将 xpath of dropdown 替换为 driver.findElement(By.xpath("//div[@unselectable='on'][@style='position: absolute; border-left: 0px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(210, 210, 210); left: 0px; top: 0px; width: 208px; height: 13px;']")) 并将 value select 从 dropdown 中编辑 APAC Delivery Center 或 GU 随便你。
谢谢大家帮助我，但我使用以下代码解决了我的问题：
driver.findElement(By
.xpath("//div[@unselectable='on'][@style='position: absolute; border-left: 0px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(210, 210, 210); left: 0px; top: 0px; width: 208px; height: 13px;']"))
.click();
Thread.sleep(5000);
driver.findElement(By
.xpath("//div[@unselectable='on'][@style='position: absolute; z-index: 1; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(220, 220, 220); left: 0px; top: 0px; width: 205px; height: 13px;']"))
.click();
我想单击显示在该特定选项列表中的选项，但我不能这样做。地理组是过滤器，除此之外，您还可以看到下拉图标，单击该图标后，我应该可以看到显示的两个选项，即 'APAC Delivery Center' 和 'GU'。我附上了图片。
下面是我的 UI 代码：
<div owner = "71"style="z-index: 666; left: 602px; top: 153px; width: 208px; height: 30px; position: absolute;"id="DS"class="QvFrame DS">
<div style = "height: 28px; width: 206px;"class="QvContent">
<div incontainer = "false"style="visibility: visible; position: relative; overflow: hidden; cursor: default; font-weight: normal; font-family: Arial; font-size: 8pt; font-style: normal; text-decoration: none; height: 28px; width: 206px;"objtype="Listbox"class="QvListbox">
<div style="position: relative; overflow: hidden; width: 206px; height: 28px;"><div class="QvOptional" title="APAC Delivery Center" unselectable="on" style="text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 206px; height: 14px;">
<div unselectable = "on"style="position: absolute; z-index: 1; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(220, 220, 220); left: 0px; top: 0px; width: 205px; height: 13px;"></div>
<div title = "APAC Delivery Center"unselectable="on"style="padding: 0px; width: 206px; height: 14px; white-space: pre;">
<div unselectable = "on"style="width: 2px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;"></div>
<div unselectable = "on"style="width: 202px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;">
APAC Delivery Center</div></div></div>
<div class="QvOptional"title="GU"unselectable="on"style="text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 14px; width: 206px; height: 14px;">
<div unselectable = "on"style="position: absolute; z-index: 1; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(220, 220, 220); left: 0px; top: 0px; width: 205px; height: 13px;"></div>
<div title = "GU"unselectable="on"style="padding: 0px; width: 206px; height: 14px; white-space: pre;">
<div unselectable = "on"style="width: 2px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;"></div>
<div unselectable = "on"style="width: 202px; float: left; height: 14px; overflow: hidden; word-wrap: normal; white-space: pre;">GU</div></div></div></div>
<div style = "display: none; opacity: 1; right: auto; bottom: auto; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; border-radius: 3px; width: 9px; height: 9px; background-color: rgb(221, 221, 221);"class="TouchScrollbar"></div>
下面是我的下拉图标代码：
<div title="" class="cell-icon cell-ODDC-icon"></div>
我尝试使用以下代码，但问题仍未解决：
driver.findElement(By
.xpath("//div[@class='QvGrid'][@style='position: absolute; border-left: 0px solid rgb(255, 255, 255); border-right: 2px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(255, 255, 255); left: 0px; top: 0px; width: 11px; height: 13px;']"))
.click();
下面是 UI 代码，我尽力弄明白了，因为它非常复杂：
<div objtype="Grid" objsubtype="MB" style="z-index: 68; top: 92px; left: 390px; width: 422px; height: 219px; border-radius: 7px; border: 1px solid rgb(232, 232, 232);" id="180" class="QvFrame Document_MB18">
<div style="height: 217px; width: 420px; border-radius: 6px; background-color: rgb(255, 255, 255); overflow: visible;" class="QvContent">
<div incontainer="false" style="position: relative; overflow: hidden; cursor: default; font-weight: normal; font-family: Arial; font-size: 8pt; font-style: normal; text-decoration: none; width: 420px; height: 217px;" class="QvGrid">
<div style="position: relative; overflow: hidden; width: 408px; height: 205px;">
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 0px; height: 0px;">
<div class="page" page="0" style="position: absolute; height: 100%; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 0px; height: 205px;">
<div class="page" page="0" style="position: absolute; height: 224px; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; transition-duration: 0ms; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 205px; width: 0px; height: 0px;">
<div class="page" page="0" style="position: absolute; height: 100%; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 408px; height: 0px;">
<div class="page" page="0" style="position: absolute; height: 100%; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; transition-duration: 0ms; transform: translate(0px, 0px);"></div></div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 408px; height: 205px;">
<div class="page" page="0" style="position: absolute; height: 224px; transition-timing-function: cubic-bezier(0, 0.3, 0.6, 1); transition-property: -moz-transform; transition-duration: 0ms; transform: translate(0px, 0px);">
<div unselectable="on" style="background-color: rgb(255, 255, 255); color: rgb(54, 54, 54); text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 198px; height: 14px;" title="Geographic Group">
<div unselectable="on" style="position: absolute; border-right: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); left: 0px; top: 0px; width: 197px; height: 13px;"></div>
<div class=" injected" style="padding: 0px 2px; width: 194px; height: 14px;">
<div title="Geographic Group" unselectable="on" style="width: 194px; white-space: pre; overflow: hidden; word-wrap: normal;">Geographic Group</div></div></div>
<div unselectable="on" style="background-color: rgb(255, 255, 255); color: rgb(54, 54, 54); text-align: left; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 198px; top: 0px; width: 13px; height: 14px;" title="">
<div unselectable="on" style="position: absolute; border-left: 0px solid rgb(255, 255, 255); border-right: 2px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(255, 255, 255); left: 0px; top: 0px; width: 11px; height: 13px;"></div>
<div class=" injected" style="padding: 0px 2px; width: 9px; height: 14px;"><div style="width: 9px;"><div class="Qv_CellIcon_right" style="width: 14px; height: 13px; max-width: 9px; max-height: 13px;"><div title="" class="cell-icon cell-ODDC-icon"></div></div></div></div></div><div unselectable="on" style="background-color: rgb(248, 248, 248); color: rgb(54, 54, 54); text-align: center; font-style: normal; font-weight: normal; text-decoration: none; cursor: pointer; position: absolute; overflow: hidden; left: 211px; top: 0px; width: 208px; height: 14px;" title="">
即使我无法点击那个下拉图标，它也可以。我可以点击那个地理组前面的空白区域，它仍然会显示选项列表。
UI 我检查的那个空白区域的代码是：
<div unselectable="on" style="position: absolute; border-left: 0px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(210, 210, 210); left: 0px; top: 0px; width: 208px; height: 13px;"></div>
请帮我解决这个问题，或者如果您需要更清楚地了解这个问题，请告诉我。提前致谢:)
如果您想 select 从下拉列表中获取一些值，请使用 Select class
Select drp = new Select("xpath of dropdown");
Thread.sleep(5000);
drp.selectByVisibleText("value to be selected from dropdown");
这里我假设这是您的下拉路径 <div title="" class="cell-icon cell-ODDC-icon"></div>。如果这是正确的，那么你可以这样写。
将 xpath of dropdown 替换为 driver.findElement(By.xpath("//div[@unselectable='on'][@style='position: absolute; border-left: 0px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(210, 210, 210); left: 0px; top: 0px; width: 208px; height: 13px;']")) 并将 value select 从 dropdown 中编辑 APAC Delivery Center 或 GU 随便你。
谢谢大家帮助我，但我使用以下代码解决了我的问题：
driver.findElement(By
.xpath("//div[@unselectable='on'][@style='position: absolute; border-left: 0px solid rgb(210, 210, 210); border-bottom: 1px solid rgb(210, 210, 210); left: 0px; top: 0px; width: 208px; height: 13px;']"))
.click();
Thread.sleep(5000);
driver.findElement(By
.xpath("//div[@unselectable='on'][@style='position: absolute; z-index: 1; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(220, 220, 220); left: 0px; top: 0px; width: 205px; height: 13px;']"))
.click();