Clicking via JavaScript in Selenium Java - Build an Automation Script

Click a button using JavaScript Executor in Selenium

Preconditions (3)

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

Step 2: Locate the button element by its ID 'submitBtn'

Step 3: Use JavaScript Executor to click the button

Step 4: Verify that the button click triggered the expected action (e.g., URL changed to /success or confirmation message displayed)

✅ Expected Result: The button is clicked successfully via JavaScript, and the expected action occurs confirming the click.

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify the button element is present before clicking

Verify the expected action after clicking (URL or page content change)

Best Practices:

Use explicit waits to ensure element is present and clickable

Use JavaScript Executor only when normal click() fails

Use By.id locator for button element

Handle exceptions gracefully

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 ClickViaJavaScript {
    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/testpage");

            // Wait for button to be present
            WebElement button = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("submitBtn")));

            // Use JavaScript Executor to click the button
            JavascriptExecutor js = (JavascriptExecutor) driver;
            js.executeScript("arguments[0].click();", button);

            // Wait for expected condition after click, e.g., URL contains 'success'
            boolean urlChanged = wait.until(ExpectedConditions.urlContains("success"));

            // Assertion
            if (urlChanged) {
                System.out.println("Test Passed: Button clicked via JavaScript and URL changed as expected.");
            } else {
                System.out.println("Test Failed: URL did not change after clicking button.");
            }
        } catch (Exception e) {
            System.out.println("Test Failed with exception: " + e.getMessage());
        } finally {
            driver.quit();
        }
    }
}

This code opens a Chrome browser and navigates to the test page URL.

It waits explicitly for the button with ID 'submitBtn' to be present on the page.

Then it uses JavaScript Executor to click the button because sometimes Selenium's normal click() may not work if the element is hidden or overlapped.

After clicking, it waits for the URL to contain 'success' to confirm the click triggered the expected action.

Finally, it prints the test result and closes the browser.

Common Mistakes - 4 Pitfalls

Using driver.findElement without waiting for the element to be present

Using JavaScript click() without verifying the element is interactable

Hardcoding the path to chromedriver inside the code without flexibility

Not handling exceptions during click or navigation

Bonus Challenge

Now add data-driven testing with 3 different button IDs to click using JavaScript Executor

Show Hint

Practice

1. What is the main reason to use JavaScript click in Selenium WebDriver instead of the normal click() method?

easy

A. To automatically scroll the page to the bottom

B. To click elements that are hidden or not responding to normal clicks

C. To avoid using locators for elements

D. To speed up the test execution by skipping waits

Solution

1. Step 1: Understand normal click limitations

   Normal click() may fail if element is hidden or overlapped.

2. Step 2: Role of JavaScript click

   JavaScript click forces the click event on the element regardless of visibility or overlays.

3. Final Answer:

   To click elements that are hidden or not responding to normal clicks -> Option B

4. Quick Check:

   JavaScript click helps when normal click fails [OK]

Hint: Use JS click when normal click throws ElementNotInteractableException [OK]

Common Mistakes:

• Thinking JS click speeds up tests
• Believing JS click removes need for locators
• Assuming JS click scrolls page automatically

2. Which of the following is the correct syntax to perform a JavaScript click on a WebElement named element in Selenium Java?

easy

A. ((JavascriptExecutor) driver).executeScript("arguments[0].click();", element);

B. driver.executeScript("arguments[0].click();", element);

C. JavascriptExecutor.executeScript("element.click();");

D. driver.javascriptExecutor.execute("arguments[0].click();", element);

Solution

1. Step 1: Cast driver to JavascriptExecutor

   In Selenium Java, driver must be cast to JavascriptExecutor to use executeScript.

2. Step 2: Use correct method and arguments

   The method is executeScript with script arguments[0].click(); and the element passed as argument.

3. Final Answer:

   ((JavascriptExecutor) driver).executeScript("arguments[0].click();", element); -> Option A

4. Quick Check:

   Cast driver + executeScript + arguments[0].click() = A [OK]

Hint: Always cast driver to JavascriptExecutor before executeScript [OK]

Common Mistakes:

• Calling executeScript directly on driver without cast
• Using element.click() inside script string
• Wrong method names like javascriptExecutor.execute

3. Given the following code snippet, what will be the output if the button is successfully clicked via JavaScript?

WebElement button = driver.findElement(By.id("submitBtn"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", button);
System.out.println("Clicked");

medium

A. Clicked twice

B. No output, throws exception

C. Clicked

D. Nothing prints

Solution

1. Step 1: Understand JavaScript click effect

   The JavaScript click triggers the click event on the button element.

2. Step 2: Check print statement execution

   After clicking, the print statement outputs "Clicked" to the console.

3. Final Answer:

   Clicked -> Option C

4. Quick Check:

   JS click triggers event, then print runs = C [OK]

Hint: JS click runs silently, print confirms action success [OK]

Common Mistakes:

• Expecting exceptions without errors in code
• Thinking click triggers print twice
• Assuming print won't run after click

4. You wrote this code to click a button via JavaScript but it throws a ClassCastException:

JavascriptExecutor js = driver;
js.executeScript("arguments[0].click();", button);

What is the error and how to fix it?

medium

A. executeScript method does not exist in JavascriptExecutor

B. Use driver.executeScript directly without casting

C. button element is null, causing exception

D. driver must be cast to JavascriptExecutor before assignment

Solution

1. Step 1: Identify cause of ClassCastException

   Assigning driver directly to JavascriptExecutor without cast causes ClassCastException.

2. Step 2: Correct casting syntax

   Cast driver to (JavascriptExecutor) before assignment: JavascriptExecutor js = (JavascriptExecutor) driver;

3. Final Answer:

   driver must be cast to JavascriptExecutor before assignment -> Option D

4. Quick Check:

   Cast driver to JavascriptExecutor to avoid ClassCastException [OK]

Hint: Always cast driver to JavascriptExecutor before use [OK]

Common Mistakes:

• Ignoring casting and assigning directly
• Blaming executeScript method existence
• Assuming button element causes ClassCastException

5. You want to click a button that is inside an iframe and normal Selenium click fails. Which sequence correctly uses JavaScript click to handle this?

hard

A. Switch to iframe, find button, then use JavaScript click on button

B. Use JavaScript click on button without switching iframe

C. Switch to iframe, then use normal click without JavaScript

D. Use JavaScript click on iframe element instead of button

Solution

1. Step 1: Switch to iframe context

   To interact with elements inside iframe, Selenium must switch to that iframe first.

2. Step 2: Find button and use JavaScript click

   After switching, locate the button element and perform JavaScript click to handle click issues.

3. Final Answer:

   Switch to iframe, find button, then use JavaScript click on button -> Option A

4. Quick Check:

   Switch iframe then JS click button = A [OK]

Hint: Always switch to iframe before clicking inside it [OK]

Common Mistakes:

• Trying JS click without switching iframe
• Clicking iframe instead of button
• Assuming normal click works inside iframe always