45

What is the difference between executeAsyncScript and executeScript? How can i use event such as window.onload? I tried something like this

((JavascriptExecutor) driver).executeAsyncScript("window.onload = function() {alert('Hello')}"); 

But of course it did not work... So if anyone knows how it works please write an example

2

7 Answers 7

37

(Keeping it simple, and correct.)

The relevant difference between execteScript and executeAsyncScript is this:

The function invoked with executeAsyncScript takes a 'done callback' as the last argument, which must be called to signal that the script is done executing.

This allows it to be used with code that only 'finishes' when a callback is used - eg. setTimeout or asynchronous XHR. If the 'done callback' is not called within the timeout limits the returned promise will be rejected.

Per the webdriver.WebDriver.executeAsyncScript documentation:

Unlike executing synchronous JavaScript with #executeScript, scripts executed with [#executeAsyncScript] must explicitly signal they are finished by invoking the provided callback. This callback will always be injected into the executed function as the last argument..

That is, both functions block the WebDriver control flow until they complete - either running off the end of the code for executeScript or when calling the 'done callback' with executeAsyncScript: "async" in the name signifies the signal mechanism used and does not mean/imply that the JavaScript code is actually executed asynchronously with respect to the WebDriver.

26

I use executeScript. Example provided:

String cssSelector="...blablabla...";
JavascriptExecutor js = (JavascriptExecutor) driver;
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("document.getElementById(\'"+cssSelector +"\').click();");
js.executeScript(stringBuilder.toString());

Concerning details on alerts there is known issue. you can get details here

In accordance with documentation difference is:

executeScript

public java.lang.Object executeScript(java.lang.String script,
                             java.lang.Object... args)

Description copied from interface: JavascriptExecutor Executes JavaScript in the context of the currently selected frame or window. The script fragment provided will be executed as the body of an anonymous function. Within the script, use document to refer to the current document. Note that local variables will not be available once the script has finished executing, though global variables will persist. If the script has a return value (i.e. if the script contains a return statement), then the following steps will be taken:

  • For an HTML element, this method returns a WebElement
  • For a decimal, a Double is returned
  • For a non-decimal number, a Long is returned
  • For a boolean, a Boolean is returned
  • For all other cases, a String is returned.
  • For an array, return a List with each object following the rules above. We support nested lists.
  • Unless the value is null or there is no return value, in which null is returned

Arguments must be a number, a boolean, a String, WebElement, or a List of any combination of the above. An exception will be thrown if the arguments do not meet these criteria. The arguments will be made available to the JavaScript via the "arguments" magic variable, as if the function were called via "Function.apply"

Specified by: executeScript in interface JavascriptExecutor Parameters: script - The JavaScript to execute args - The arguments to the script. May be empty Returns: One of Boolean, Long, String, List or WebElement. Or null.

executeAsyncScript

public java.lang.Object executeAsyncScript(java.lang.String script,
                                  java.lang.Object... args)

Description copied from interface: JavascriptExecutor Execute an asynchronous piece of JavaScript in the context of the currently selected frame or window. Unlike executing synchronous JavaScript, scripts executed with this method must explicitly signal they are finished by invoking the provided callback. This callback is always injected into the executed function as the last argument. The first argument passed to the callback function will be used as the script's result. This value will be handled in the same way as the synchronous case.

Example #1: Performing a sleep in the browser under test.

 long start = System.currentTimeMillis();
   ((JavascriptExecutor) driver).executeAsyncScript(
       "window.setTimeout(arguments[arguments.length - 1], 500);");
   System.out.println(
       "Elapsed time: " + (System.currentTimeMillis() - start));  

Example #2: Synchronizing a test with an AJAX application:

 WebElement composeButton = driver.findElement(By.id("compose-button"));
   composeButton.click();
   ((JavascriptExecutor) driver).executeAsyncScript(
       "var callback = arguments[arguments.length - 1];" +
       "mailClient.getComposeWindowWidget().onload(callback);");
   driver.switchTo().frame("composeWidget");
   driver.findElement(By.id("to")).sendKeys("[email protected]");

Example #3: Injecting a XMLHttpRequest and waiting for the result:

 Object response = ((JavascriptExecutor) driver).executeAsyncScript(
       "var callback = arguments[arguments.length - 1];" +
       "var xhr = new XMLHttpRequest();" +
       "xhr.open('GET', '/resource/data.json', true);" +
       "xhr.onreadystatechange = function() {" +
       "  if (xhr.readyState == 4) {" +
       "    callback(xhr.responseText);" +
       "  }" +
       "}" +
       "xhr.send();");
   JSONObject json = new JSONObject((String) response);
   assertEquals("cheese", json.getString("food"));

Script arguments must be a number, a boolean, a String, WebElement, or a List of any combination of the above. An exception will be thrown if the arguments do not meet these criteria. The arguments will be made available to the JavaScript via the "arguments" variable.

Specified by: executeAsyncScript in interface JavascriptExecutor Parameters: script - The JavaScript to execute. args - The arguments to the script. May be empty. Returns: One of Boolean, Long, String, List, WebElement, or null.

Detailed documentation is here

3
  • 6
    The "description" above (copied from the interface documentation) AND the documentation linked to are out of date. A list of "objects" will be returned as a List<Map<String,Object>>. Where, each key is a property of the object. I don't know how to get any details of this, but I just got burned after reading this so I thought I'd contribute.
    – dmansfield
    Commented May 6, 2014 at 21:10
  • @eugene.polschikov Am referring your example 3 and when i execute the line in console am getting 'Uncaught ReferenceError: arguments is not defined at <anonymous>:1:16'. Am entirely new to JS and your help is appreciated. Commented Jan 15, 2018 at 10:53
  • Documentation link is broken.
    – aepot
    Commented Jan 13, 2021 at 8:14
9

The main difference between those are that scripts executed with async must explicitly signal they are finished by invoking the provided callback. This callback is always injected into the executed function as the last argument.

1
  • 1
    Why does the poor documentation not say that ? Documentation says only: "Executes JavaScript asynchronously in the context of the currently selected frame or window. "
    – Elmue
    Commented Nov 17, 2015 at 6:07
3
((JavascriptExecutor) driver).executeScript("alert('Hello');"); 

will show the alert:

((JavascriptExecutor) driver).executeAsyncScript() is used when the JS takes time to execute e.g.in a Web Service call.

window.onload makes sure the JS is executed when the page is loaded completely.

2

I used lots of time to undertand this function and finally I got it. follwing code will help a lot:

/**
 * executeAsyncScript document mentioned callback is a browser intrinsic function for returning deferred value (e.g 123 in example) from
 * js environment to Java environment
 * 
 */
@Test
public void testAsyncScript() {
    webDriver.manage().timeouts().setScriptTimeout(1, TimeUnit.SECONDS);
    Integer a = 23;
    TestUtil.elapse("first", () -> {
        Object value = getJsExecutor().executeAsyncScript("window.setTimeout(arguments[arguments.length - 1](123), 500);", a);
        // following code should be executed after 500ms timeout
        System.out.println("a is " + a); // a has nothing to do with the documented "callback"
        assertEquals(123, value);
    });

}
1
  • this way you're executing the callback straight away when invoking the setTimeout though Commented Jun 21, 2022 at 15:49
0

This simple Async script listens for element clicked on the DOM and resolve executeAsyncScript through callback

  var clicked_element = await driver.executeAsyncScript('var callback=arguments[arguments.length - 1]; window.document.addEventListener("click", function(e){ var element = event.srcElement ||event.target; callback(element); });'); 
0

You can do like following:

JavascriptExecutor js=(JavascriptExecutor)driver;
String javascript="window.location='https://google.com';window.onload=alert('hello'); var callback=arguments[arguments.length-1]; callback();";
        js.executeAsyncScript(javascript);
    

As others said executeAsyncScript() uses a signalling mechanism known as callback to signal main function/code that the javascript in executeAsyncScript has been finished. callback is referred as argument[arguments.length-1].

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.