Async script execution in Selenium Java - Build an Automation Script

Verify asynchronous JavaScript execution on a web page

Preconditions (2)

Step 1: Open the browser and navigate to the test page URL

Step 2: Locate the button with id 'startAsync' and click it

Step 3: Use Selenium's executeAsyncScript to run a JavaScript function that waits 3 seconds and returns 'done'

Step 4: Capture the returned result from the async script execution

✅ Expected Result: The async script returns the string 'done' after approximately 3 seconds, confirming async execution works

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Assert that the returned result from executeAsyncScript equals 'done'

Best Practices:

Use explicit waits if needed before clicking elements

Use executeAsyncScript method for asynchronous JavaScript execution

Handle possible exceptions and ensure WebDriver quits after test

Automated Solution

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;

public class AsyncScriptExecutionTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            driver.get("https://example.com/async-test-page");

            // Wait until the button is clickable
            WebElement startButton = wait.until(ExpectedConditions.elementToBeClickable(By.id("startAsync")));
            startButton.click();

            JavascriptExecutor js = (JavascriptExecutor) driver;

            // Execute async script that waits 3 seconds then returns 'done'
            String result = (String) js.executeAsyncScript(
                "var callback = arguments[arguments.length - 1];" +
                "setTimeout(function() { callback('done'); }, 3000);"
            );

            if (!"done".equals(result)) {
                throw new AssertionError("Expected 'done' but got: " + result);
            }

            System.out.println("Test passed: Async script returned 'done'");

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

This test script uses Selenium WebDriver with Java to automate the manual test case.

First, it sets up ChromeDriver and opens the test page URL.

It waits explicitly for the button with id 'startAsync' to be clickable, then clicks it.

Next, it uses executeAsyncScript to run JavaScript that waits 3 seconds asynchronously and then calls the callback with 'done'.

The returned result is captured and asserted to equal 'done'.

Finally, the driver quits to close the browser.

This approach ensures the async JavaScript runs properly and the test verifies the expected output.

Common Mistakes - 4 Pitfalls

Using executeScript instead of executeAsyncScript for async code

Not waiting for the button to be clickable before clicking

Not casting the result of executeAsyncScript to the correct type

Not quitting the WebDriver in a finally block

Bonus Challenge

Now add data-driven testing with 3 different wait times (1000ms, 2000ms, 3000ms) and verify the async script returns 'done' each time.

Show Hint

Practice

1. What is the main purpose of using executeAsyncScript in Selenium Java?

easy

A. To execute JavaScript code only once when the browser starts.

B. To execute synchronous JavaScript code instantly without waiting.

C. To pause the entire Selenium test execution for a fixed time.

D. To run JavaScript code that waits for asynchronous tasks to complete before returning.

Solution

1. Step 1: Understand async JavaScript in Selenium

   Async scripts allow waiting for tasks like AJAX calls or timers to finish before continuing.

2. Step 2: Role of executeAsyncScript

   This method runs JavaScript that signals completion via a callback, so Selenium waits properly.

3. Final Answer:

   To run JavaScript code that waits for asynchronous tasks to complete before returning. -> Option D

4. Quick Check:

   Async script waits for tasks = A [OK]

Hint: Async scripts wait for callback before continuing [OK]

Common Mistakes:

• Confusing async with synchronous script execution
• Thinking it pauses test for fixed time
• Assuming it runs only once at browser start

2. Which of the following is the correct syntax to execute an async script in Selenium Java?

easy

A. driver.executeAsyncScript("var callback = arguments[0]; setTimeout(() => callback(10), 1000);");

B. driver.executeAsyncScript("return 5 + 5;");

C. driver.executeScript("var callback = arguments[0]; callback(10);");

D. driver.executeAsyncScript(() -> { return 10; });

Solution

1. Step 1: Identify async script syntax

   Async scripts require a callback function as the last argument to signal completion.

2. Step 2: Check each option

   driver.executeAsyncScript("var callback = arguments[0]; setTimeout(() => callback(10), 1000);"); correctly defines a callback and calls it after 1 second delay. driver.executeAsyncScript("return 5 + 5;"); lacks callback, C uses executeScript (sync), D uses wrong syntax.

3. Final Answer:

   driver.executeAsyncScript("var callback = arguments[0]; setTimeout(() => callback(10), 1000);"); -> Option A

4. Quick Check:

   Callback with setTimeout = A [OK]

Hint: Async scripts need callback as last argument [OK]

Common Mistakes:

• Not passing or calling the callback function
• Using executeScript instead of executeAsyncScript
• Wrong Java syntax for async scripts

3. What will be the output of the following Selenium Java code snippet?

Object result = driver.executeAsyncScript(
  "var callback = arguments[0]; setTimeout(() => callback('done'), 500);");
System.out.println(result);

medium

A. TimeoutException

B. null

C. done

D. undefined

Solution

1. Step 1: Understand the async script behavior

   The script waits 500ms then calls callback with 'done'. Selenium waits for this callback and returns its value.

2. Step 2: Check what is printed

   The returned value from executeAsyncScript is 'done', so System.out.println prints 'done'.

3. Final Answer:

   done -> Option C

4. Quick Check:

   Callback returns 'done' = C [OK]

Hint: Callback value is returned and printed [OK]

Common Mistakes:

• Expecting null before callback runs
• Confusing async script with synchronous
• Assuming timeout error without delay

4. Identify the error in this Selenium Java async script usage:

driver.executeAsyncScript("setTimeout(() => { return 'done'; }, 1000);");

medium

A. Missing callback argument and not calling it to signal completion.

B. Using arrow function inside executeAsyncScript is not allowed.

C. Timeout value should be zero for async scripts.

D. executeAsyncScript cannot run setTimeout functions.

Solution

1. Step 1: Check async script requirements

   Async scripts must accept a callback argument and call it to signal completion.

2. Step 2: Analyze the given code

   The code uses setTimeout but does not accept or call any callback, so Selenium never knows when to continue.

3. Final Answer:

   Missing callback argument and not calling it to signal completion. -> Option A

4. Quick Check:

   Callback must be called = D [OK]

Hint: Always pass and call callback in async scripts [OK]

Common Mistakes:

• Forgetting to pass callback as argument
• Returning value instead of calling callback
• Thinking arrow functions are disallowed

5. You want to test a web page that loads data dynamically after 3 seconds. Which async script approach correctly waits for the data load before continuing?

driver.executeAsyncScript(
  "var callback = arguments[0];
   var checkData = () => {
     if(document.querySelector('#data').innerText !== '') {
       callback('loaded');
     } else {
       setTimeout(checkData, 500);
     }
   };
   checkData();
");

hard

A. This script will timeout immediately because callback is never called.

B. This script correctly polls for data and calls callback when ready.

C. This script blocks the browser and never calls callback.

D. This script should use executeScript instead of executeAsyncScript.

Solution

1. Step 1: Understand polling in async scripts

   The script repeatedly checks if '#data' element has text, calling callback only when data is loaded.

2. Step 2: Verify callback usage and waiting

   Callback is called only after data is ready, so Selenium waits properly for dynamic content.

3. Final Answer:

   This script correctly polls for data and calls callback when ready. -> Option B

4. Quick Check:

   Polling with callback = B [OK]

Hint: Poll and call callback when ready to wait dynamically [OK]

Common Mistakes:

• Not calling callback after data loads
• Using executeScript which does not wait
• Blocking browser with infinite loops