无法从类似于下拉框的弹出窗口中选择值

Question

I have to select field which is similar like dropdown-box but not actual dropdown-box. The select field shows value in pop-up which contains values and sub-values, I need to select values.

Facing issues :

Not able to identify the object and unable to select the value from the field.

I have tried for cssSelector to identify object : " div[class='mailval'][title='Breast > Both'] ". It is not working.

Following is the HTML Code :

<div class="rowDiv ">
   <label for="bodypart">Body Part</label>
   <div id="bodypart_box_1">
       <div style="position:absolute;left:185px;z-index: 20">
           <ul class="parent">
               <li>
                   <div id="main" class="mailval">events=Object { click=[1]}handle=function()
                       <input id="bodypart_1" class="bodypart" type="text" onfocus="if($(this).hasClass('disabled')){$(this).blur();}" readonly="readonly" value="Select One" name="bodypart_1" title="">
                       <input id="actualBodypart_1" type="hidden" value="Breast" name="actualBodypart_1">
                   </div>
                   <ul id="bodyPartList_1" class="top sub bodyPartList" style="display: none;">olddisplay="block"
                       <li>
                           <div class="mailval fly" title="Breast" originaltitle="Breast">Breast</div>events=Object { click=[1], mouseover=[1]}handle=function()
                           <ul>
                               <li>
                                   <div class="mailval" title="Breast > Both" originaltitle="Breast > NULL > Both">Both</div>events=Object { click=[1], mouseover=[1]}handle=function()
                               </li>
                               <li>
                                   <div class="mailval" title="Breast > Left" originaltitle="Breast > NULL > Left">Left</div>events=Object { click=[1], mouseover=[1]}handle=function()
                               </li>
                               <li>
                                   <div class="mailval" title="Breast > Right" originaltitle="Breast > NULL > Right">Right</div>events=Object { click=[1], mouseover=[1]}handle=function()
                               </li>
                           </ul>
                       </li>
                   </ul>
               </li>
           </ul>
           <div style="clear:both"></div>
       </div>
       <p id="bodypart-error" class="errorMessage ml161px pa ie7ErrorFix" style="top:140px !important"></p>
   </div>

Answer 1

The right way of using a class attribute in a selector is,it should be preceded by "."

your selector can be rewritten as follows,

div[title='Breast > Both'].mailval

you can try this selector as well, an id attribute should be preceded by "#"

#bodyPartList_1 > div div[title='Breast > Both'].mailval

refer this to learn more about selectors

EDIT : As per your html, the popup only appears when hovered over or clicked. This action can be performed using JavascriptExecuter ,

((JavascriptExecutor)driver).executeScript("$('#bodyPartList_1 > .mailval.fly').click();");

Now the popup will be displayed, you just have to select the desired value...

new WebDriverWait(driver,20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div[title='Breast > Both'].mailval"))).click();