Question

I am having trouble selecting an item from a Javascript dropdown (i.e. the items in the drop list are not hidden in DOM tree, they are not present at all until link is clicked). I have tried using the Actions class in ways like this:

    Actions cursor = new Actions(driver);
    cursor.moveToElement(linkThataDropsMenu).perform();
    cursor.click();

I have tried using the clickAndWait() function but it apparently does not exist in the Java webDriver libraries, and I have tried many variations of pausing and clicking in my code, including clicking twice. clickAndHold() also does nothing.

Below is the DOM tree after the menu has been generated. The only thing that changes on clicking is the insertion of div class=”menu”

<div id="divIdActive_2" class="data number active" style="min-height: 21px;">
<a class="opencnl" href="#">
    <span id="opencnlSpan" class="active" style="background-color: 
                             transparent;">800-852-2222</span>
</a>
<img class="tollFree" title="Display name(s) for Toll free function properly on 
                     Verizon Wireless devices, but may be omitted by other carriers on 
                     their devices." src="img/nil.gif">
<input id="customNum" type="hidden" value="8008522222" name="number_2">
<div class="menu">
    <a class="edit" href="#">Change Custom Number</a>
    <a class="copy" href="#">Copy Settings for 0 Selected Lines</a>
    <a class="clear" href="#">Clear Settings For this Line</a>
</div>
</div>

Here’s the strange part though – I can get the menu to drop from the IDE, using click() or clickAndWait(), and the exact same locator. From my Java code I can use my locators to gather the text of the element I want to click, but I can’t click the element. I have hundreds of other click commands in my Java code that work perfectly well, but not here. Any ideas? Thanks for reading at least!

Answer 1

I got it! The trick was to mouse over the item, then click, then mouse over the item again, which leaves the cursor there, and then grab the newly rendered objects. My guess now is that before I added that second moveToElement(), as soon as the click happened the cursor was done doing everything it was asked to do and was garbage collected. Here’s my code for that – hope it helps somebody!

    Actions cursor = new Actions(driver);
    cursor.moveToElement(customNumberLink).perform();
    cursor.click();     

    // move to SAME element to leave cursor where it is while Javascript runs.
    cursor.moveToElement(customNumberLink).perform();

    // now grab newly generated elements
    WebElement clearLink = customNumberCell.findElement(By.cssSelector("a.clear"));
    clearLink.click();