Dropdown not working in selenium java

Question

I want to click on the option which is displayed in the list of that particular option but I am not able to do so . Geographic group is the filter, besides that you will be able to see dropdown icon and after clicking on that icon I should be able to see shown two options i.e 'APAC Delivery Center' and 'GU'. I have attached images.

Below is my UI code:

<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>

Below is my code for dropdown icon:

<div title="" class="cell-icon cell-ODDC-icon"></div>

I tried using below code but still my problem is not solved:

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();

Below is UI Code which I tried my best to figure it out since its very complex:

<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="">

Even if I am not able to click on that dropdown icon then also it will do .I can click on that blank area infront of that geographic group and still it will shown list of options.
UI code for that blank area which I inspected is :

<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>

Please help me to solve this or if you need more clarity on this please let me know. Thanks in advance :)

I can't see anything in your HTML with the class 'QvGrid' Is this something you've missed from the HTML you pasted above, or an error in the xpath? — Jsmith2800, Apr 05 '17 at 14:40
I have edited my question. Please go through it and if any more clarity is needed please let me know — whatsinthename, Apr 06 '17 at 04:41

Anuj Teotia · Answer 1 · 2017-04-06T06:12:15.687

0

If you want to select some value from dropdown then make use of Select class

Select drp = new Select("xpath of dropdown");
Thread.sleep(5000);
drp.selectByVisibleText("value to be selected from dropdown");

here I'm supposing this is your path of dropdown <div title="" class="cell-icon cell-ODDC-icon"></div> . If this is right then you can write something like this.

replace xpath of dropdown by 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;']")) and value to be selected from dropdown by APAC Delivery Center or GU whichever you want.

edited Apr 06 '17 at 06:12

answered Apr 05 '17 at 13:28

Anuj Teotia

1,303
1
15
21

how to do this in my case ? can you help me with that . It would be very helpful – whatsinthename Apr 06 '17 at 04:57
Can you provide me the html which contains path for dropdown, and please do highlight it, because the html you provided is not very clear, I mean I'm not able to find the xpath of your dropdown using the above html provided. – Anuj Teotia Apr 06 '17 at 05:00
your solution didnt worked for me .its not clicking on that area or icon. I have updated my question .please let me know if you want still more details. Actually the UI is very complex but still I am trying my best – whatsinthename Apr 06 '17 at 05:51
I have changed the value in my answer, try this one. – Anuj Teotia Apr 06 '17 at 06:12
It gives unexpected tag exception :Element should have been "select" but was "div" Build info: version: 'unknown', revision: '5234b32', time: '2017-03-10 09:00:17 -0800' – whatsinthename Apr 06 '17 at 07:05
Ya right.. If its a dropdown then it should be in Select tag. My bad. – Anuj Teotia Apr 06 '17 at 07:14

score 0 · Accepted Answer · answered Apr 06 '17 at 07:30

Thank you everyone for helping me but I solved my answer using below code :

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();

Dropdown not working in selenium java

2 Answers2