Java - Wait for JavaScript event (e.g. onchange) to complete using Selenium

After serious refactoring and some research, I finally made it. The onchange event fires when the value of the input field is changed and the element loses focus. Manipulating the fields with WebElement (e.g. sendKeys()) is not an option because you are not in control of the background processing, so using JavascriptExecutor is the choice. First, I updated the value of the field using JavaScript (which does NOT trigger the event), and after that, I triggered the onchange event, also using JavaScript:

//Setting implicit wait to 0 to avoid mess with explicit waits
driver.manage().timeouts().implicitlyWait(0, TimeUnit.SECONDS);
//Use WebDriverWait instead of FluentWait (it's superclass)
Wait<WebDriver> wait = new WebDriverWait(driver, 25, 500);
for(int i = 1; i <= fieldCount; i++) {
    String elementId = "field$" + i;
    String javaScript = String.format("document.getElementById('%s').value='%s';", elementId , myValue);
    Object jsResult = wait.until(ExpectedConditions.javaScriptThrowsNoExceptions(javaScript));
    javaScript = String.format("return document.getElementById('%s').dispatchEvent(new Event('change'));", elementId);
    jsResult = wait.until(ExpectedConditions.jsReturnsValue(javaScript));
}

There are some key aspects here.

• Do NOT mix implicit and explicit waits (I learnt it the hard way), it will cause unexpected results.
• Use WebDriverWait (specialization of FluentWait) instead of its superclass, unless you have a very specific requirement. If you use FluentWait make sure to ignore appropriate exceptions; otherwise you will start getting NoSuchElementException.
• The onchange event fires when the value of the input field is changed and the element loses focus.
• dispatchEvent() dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. This applies for custom events as well. This is a very nice post for events.

I used the following code to get a better grasp of ExpectedConditions.javaScriptThrowsNoExceptions and ExpectedConditions.jsReturnsValue. It is a JavaScript function call that just keeps the engine busy for few seconds. That way you can see the interaction of the explicit wait with JavaScript and inspect the return values. Notice that the JS code is slightly different for each ExpectedCondition:

//ExpectedConditions.jsReturnsValue
String javaScript = "(function watcher(ms){var start=new Date().getTime();var end = start;while(end<start+ms){end=new Date().getTime();};return 'complete';})(5000);return 'success';";
log.trace("javaScript={}", javaScript);
Object jsResult = wait.until(ExpectedConditions.jsReturnsValue(javaScript));
log.trace("jsResult={}", jsResult);

//ExpectedConditions.javaScriptThrowsNoExceptions
javaScript = "(function watcher(ms){var start=new Date().getTime();var end = start;while(end<start+ms){end=new Date().getTime();};return 'complete';})(5000);";
log.trace("javaScript={}", javaScript);
jsResult = wait.until(ExpectedConditions.javaScriptThrowsNoExceptions(javaScript));
log.trace("jsResult={}", jsResult);