How to get XPath of a list element generated by AJAX?

Question

When I type a keyword ("Documents 1.xml")

driver.findElement(By.id("documentSelect_enter")).sendKeys("Documents 1.xml");

in this field:

<input id="documentSelect_enter" type="text" style="width: 300px" /> 
<img id="documentSelect_enterwait" src="/devstaging/img/ajax_process.gif" style="display: none" border="0" />
<div id="documentSelect_enteroptions" class="autocompleter"></div>
<script>
 Event.observe($('documentSelect_enter'), 'keypress', function(event){ if(event.keyCode == Event.KEY_ENTER) return false; }, true);
 function documentSelect_updateElement(li){
 var id = li.readAttribute('id');
 if (id != 'noresults'){
 $('theForm:documentSelect_picker').value = id;
 $('theForm:documentSelect_add').click();
 $('documentSelect_enter').value = '';
 return false;
 }
 }
 function documentSelect_actionButton(){
 if(false){
 $('theForm:documentSelect_addAction').click();
 }
 }
 document.documentSelect_multiPicker = new Ajax.Autocompleter('documentSelect_enter', 'documentSelect_enteroptions', "/devstaging/multiPickerResults?p=name&t=Document&subsetOf=&label=label", {paramName: "q", updateElement: documentSelect_updateElement, indicator: "documentSelect_enterwait"});
</script><input id="theForm:documentSelect_add" name="theForm:documentSelect_add" onclick="A4J.AJAX.Submit('_viewRoot','theForm',event,{'oncomplete':function(request,event,data){documentSelect_actionButton();},'parameters':{'theForm:documentSelect_add':'theForm:documentSelect_add'} ,'actionUrl':'/devstaging/pca/batch/add'} );return false;" style="display: none" type="button" /><input id="theForm:documentSelect_addAction" name="theForm:documentSelect_addAction" onclick="A4J.AJAX.Submit('_viewRoot','theForm',event,{'parameters':{'theForm:documentSelect_addAction':'theForm:documentSelect_addAction'} ,'actionUrl':'/devstaging/pca/batch/add'} );return false;" style="display: none" type="button" /><input id="theForm:documentSelect_picker" type="hidden" name="theForm:documentSelect_picker" /><span id="theForm:documentSelect_zone"><span id="theForm:documentSelect_noselections">

it returns a list of 4 items, from which I should select the top one. But I can't click on that top item with Selenium WebDriver. I use FireBug and it doesn't give me any hooks for it. When I try to hover over it with firebug "inspect", the list disappears or doesn't return any "hooks" (xpath, id, css etc). How do I make the WebDriver to select it?

Answer 1

You should be able to use By.XPath("//input[@id=\"documentSelect_enter\"]"). I'm not sure what you mean by "returns AJAX list of 4 items". I may not be understanding your question correctly.

• Prostak: You know like in google when you start typing a word, it lists your the suggestions below. So same way here, when I type that keyword, it returns "suggestions" the same way the google search does. That's what I mean.
• Sam Woods: Sorry, I just re-read your answer and understand now... You could speak to your developer and see what the html looks like. You could probably also run your automation up to the point where the 4 items appear and then print out the dom using selenium like this: String html = (String)((JavascriptExecutor)driver).executeScript("document.getElementsByTagName('html')[0].innerHTML")
• Prostak: I get the following error: INFO: Executing: [2a5f47e5-a686-c046-9b79-837a8e0a94c1, executeScript {"script":"document.getElementsByTagNam\u200c\u200be('html')[0].innerHTML","args":[]}] Exception in thread "main" org.openqa.selenium.WebDriverException: null (WARNING: The server did not provide any stacktrace information)
• Prostak: hello, Sam? i've edited original post to show the full html. I think that's what you wanted to see.
• Sam Woods: The source of the page is different than the DOM which is constantly updated and contains only the html (and not script). I'm still unsure what HTML is generated by the script on your page, and that's what you need to see in order to find a way to identify it for selenium... I'm not sure what that error is about, you might look it up to figure out how to get past it.

Answer 2

I had also this problem with auto-suggested text box and I saw deeply at the code at the downline you would be seen anchor tag either with ul or li. Try to see the values whatever you are put in the text box at those anchor tags. Once you would be able to see that you can easily get the suggested values from that ajax text box.