Actions through WebDriver will not trigger the blur event

Question

I have a web page with two dropdowns. Selecting an option in one dropdown will update the list of options in the other dropdown through a script that's triggered by the blur event. The blur event is triggered when the focus moves away from the first dropdown. This all works fine when navigating the page manually.

However, when performing the same steps through WebDriver, the blur event is never triggered, and the dropdown is thus never updated, causing my script to fail.

Here's the html for the dropdown I select first (and which has the onblur script attached to it:

<select id="newOrder:shipToAddressType" class="fieldRequired"     onblur="PrimeFaces.ab({source:this,event:'blur',process:'newOrder:odShipData',update:'newO>rder:odShipData',partialSubmit:true,oncomplete:function(xhr,status,args)>{focusOnShipToZip();;}}, arguments[1]);" tabindex="47" size="1" name="newOrder:shipToAddressType">
<option selected="selected" value="125">Domestic</option>
<option value="126">International</option>
<option value="127">Military</option>
</select>

Here's what I've tried so far:

Navigating the page as I would manually
I make the selection in the dropdown, then enter text in another field to move the focus away from the dropdown in order to trigger the blur event. This did not work. I also tried tabbing out of the dropdown, also no luck.

Executing Javascript to trigger the blur event
I know the Javascript is correct, since I can successfully run it from firebug: it triggers an update of the second dropdown. However, from WebDriver it does not seem to trigger anything.

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.getElementById('newOrder:shipToAddressType').blur()");

Any suggestions? Thanks for your help.

Edit: I tried adding 'return' to the script string. Also didn't work:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("return document.getElementById('newOrder:shipToAddressType').blur()");

Answer 1

Here are a couple of ideas:

Use a TAB to go to the next field. This would simulate a user hitting the TAB key to go on to the next field, and should theoretically simulate the browser's blur event.

You can do this by using the sendKeys method:

WebElement element = driver.findElement(By.id('newOrder:shipToAddressType'));
element.sendKeys("\t");

Inject javascript to simulate the blur method. You have already attempted to try this it looks like, but you forgot one important aspect of executeScript -- always return your code!

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("return document.getElementById('newOrder:shipToAddressType').blur()");

One last thing, it would be helpful info to include which browser your are using, just for informational purposes.

UPDATE

Try this to give direct focus to the element, and then unfocus (blur) it:

WebElement element = driver.findElement(By.id('newOrder:shipToAddressType'));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].focus(); arguments[0].blur(); return true", element);

Answer 2

Another option is to try triggering a click on something besides the input, like the body.

driver.findElement(By.tagName("body")).click();

This is working for me.

Answer 3

Try using the Actions class, WebDriver support mouse and user interaction using this class Something like this:

WebElement element = driver.findElement(By.id('newOrder:shipToAddressType'));
(new Actions(driver)).moveToElement(element ,500,500).build().perform();

This will move as many pixels as you set it and trigger the blur event

Answer 4

Normally in html page when we click on any element we actually focus on that element by blurring current element. So simply you can click on any other element which don't trigger anything on click.