How to test a dropdown list in selenium which was created using the input tag (not the select tag)? - selenium

Question

Here there are a lot of posts for testing dropdown lists which are created using the select and option tags. But even after lot of effort, I could not find even a single post for testing dropdowns created using input tag.
html code :
<input id="CEPJICNK.ProcMgmtView.InstanceAdvancedQueryHitLimitDropDownBK" autocomplete="off" value="10" readonly="true" ct="CB" lsdata="{7:'SVSDK.com.sap.dictionary.string_530_',8:'10',10:'10',12:true}" lsevents="{Select:[{'ClientAction':'submit'},{'urEventName':'COMBOBOXSELECTIONCHANGE'}],Change:[{'ClientAction':'submit'},{'urEventName':'COMBOBOXSELECTIONCHANGE'}]}" tabindex="0" ti="0" class="urEdf2TxtRadius urEdf2TxtEnbl lsEdf3TxtHlpBtn lsEdfLeftBrdRadius lsEdFieldFocus" style="width:100%;"></td><td class="lsTblEdf3HlpBtnTd"><input type="text" readonly="true" id="CEPJICNK.ProcMgmtView.InstanceAdvancedQueryHitLimitDropDownBK-btn" tabindex="-1" ti="-1" class="urBorderBox lsEdf2HlpRadius lsEdf3HlpBtn lsEdf3HlpBtnCoB lsEdf3HlpBtnFocus"></td></tr></tbody></table>
*//Current Values in dropdown are : 10,20,30,40,All*
<tbody><tr ct="ILBI" lsdata="{0:'10',4:'10'}" id="SVSDK.com.sap.dictionary.string_530_-key-0" class="urIlb2ISel"><td class="urIlb2I urColorTxtStandard">10</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'20',4:'20'}" id="SVSDK.com.sap.dictionary.string_530_-key-1" class="">
<td class="urIlb2I urColorTxtStandard">20</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'30',4:'30'}" id="SVSDK.com.sap.dictionary.string_530_-key-2" class=""><td class="urIlb2I urColorTxtStandard">30</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'40',4:'40'}" id="SVSDK.com.sap.dictionary.string_530_-key-3" class=""><td class="urIlb2I urColorTxtStandard">40</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'-1',4:'All'}" id="SVSDK.com.sap.dictionary.string_530_-key-4" class=""><td class="urIlb2I urColorTxtStandard">All</td>
<td> </td></tr></tbody></table></div>

Answer 1

Hi #Sumitbit2005 What approach i found is :
1. first get hold of input tag using xpath and its id
2. get lsdata attribute of this element
3. now using string operations, extract the number part
4. now that we have the number, we can access the table by giving full xpath
5. But alas the table is in a <div> tag which is in quotes. Hence the DOM can't access it directly
6. So what I do next is first access the parent element of <div> and then access its innerHTML
7. Finally we need to verify if all the expected values exist in this innerHTML
8. A clean way to do this is to treat this innerHTML as XML and
a. calculated count of values using xpath query
b. check each value using xpath query

Answer 2

We have the same problem. The best approach is to click on the drop down input button (-btn) and have the input box being visible. Than you can find the table in the dom and walk through it programmatically knowing exactly how and what is in it.
You can navigate the combo box by using sendKeys(Keys.ARROW_UP / DOWN) directly but you should always have the table (drop down) visible and use it for moving up and down. Having it not open and just use the input for up down will result in stale references since it appears that the input element is rewritten to the dom every 100 or so ms (no idea whats the js is causing it). Even if we refresh the element (by refinding it) the table starts to do weired stuff even causing it to have no value at all (no value attribute at the given time) or the table starts on first index again even if we were in the middle of the options.
So always have the combo box table visible.