Why JavaScript execution handles edge cases in Selenium Java - Test Execution Impact

Test Overview

This test verifies that JavaScript execution in Selenium can handle edge cases where normal element interaction fails, such as hidden or overlapped elements. It confirms that JavaScript can click a button even if Selenium's standard click method cannot.

Test Code - JUnit with Selenium WebDriver

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 org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.assertTrue;

public class JavaScriptExecutionEdgeCaseTest {
    WebDriver driver;
    WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, 10);
    }

    @Test
    public void testJavaScriptClickHandlesHiddenButton() {
        driver.get("https://example.com/hidden-button");

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

        try {
            // Try normal click - expected to fail if button is hidden or overlapped
            button.click();
        } catch (Exception e) {
            // Use JavaScript click as fallback
            JavascriptExecutor js = (JavascriptExecutor) driver;
            js.executeScript("arguments[0].click();", button);
        }

        // Verify that clicking the button triggered expected result
        WebElement message = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("resultMessage")));
        assertTrue(message.getText().contains("Success"));
    }

    @AfterEach
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts and Chrome browser opens	Browser window is open and ready	—	PASS
2	Navigates to https://example.com/hidden-button	Page with hidden button loads	Waits until button with id 'hiddenBtn' is present in DOM	PASS
3	Attempts to click the hidden button using Selenium's click()	Button is present but hidden or overlapped, click throws exception	—	FAIL
4	Catches exception and executes JavaScript to click the button	JavaScript click triggers button action despite hidden state	—	PASS
5	Waits for result message to become visible	Result message with id 'resultMessage' appears on page	Verifies message text contains 'Success'	PASS
6	Test ends and browser closes	Browser window closes cleanly	—	PASS

Failure Scenario

Failing Condition: JavaScript execution fails to click the hidden button or result message does not appear

Execution Trace Quiz - 3 Questions

Why does the test use JavaScript to click the button?

A Because the button is disabled

B Because JavaScript clicks are faster than Selenium clicks

C Because the button is hidden or overlapped and Selenium's normal click fails

D Because the test wants to test JavaScript execution only

Key Result

Using JavaScript execution in Selenium helps handle edge cases where normal element interactions fail, such as clicking hidden or overlapped elements, improving test robustness.

Practice

1. Why do testers use JavaScript execution in Selenium when automating web tests?

easy

A. To avoid writing any locators for elements

B. To replace all Selenium commands with JavaScript

C. To slow down the test execution intentionally

D. To interact with elements that are hidden or not easily clickable by Selenium

Solution

1. Step 1: Understand Selenium's limitation with hidden elements

   Selenium sometimes cannot click or interact with elements that are hidden or overlapped by others.

2. Step 2: Role of JavaScript execution

   JavaScript execution runs code directly in the browser, allowing interaction with such tricky elements.

3. Final Answer:

   To interact with elements that are hidden or not easily clickable by Selenium -> Option D

4. Quick Check:

   JavaScript helps with tricky elements [OK]

Hint: JavaScript helps when Selenium can't click normally [OK]

Common Mistakes:

• Thinking JavaScript replaces all Selenium commands
• Using JavaScript to slow tests down
• Ignoring locators completely

2. Which of the following is the correct JavaScript execution syntax in Selenium Java to click an element stored in WebElement element?

easy

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

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

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

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

Solution

1. Step 1: Identify correct casting and method call

   In Selenium Java, JavaScript execution requires casting driver to JavascriptExecutor and calling executeScript with script and arguments.

2. Step 2: Verify syntax correctness

   ((JavascriptExecutor) driver).executeScript("arguments[0].click();", element); correctly casts driver and passes the element as argument to click it via JavaScript.

3. Final Answer:

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

4. Quick Check:

   Correct casting and method [OK]

Hint: Cast driver to JavascriptExecutor before executeScript [OK]

Common Mistakes:

• Calling executeScript without casting
• Using wrong method names
• Passing element incorrectly

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

JavascriptExecutor js = (JavascriptExecutor) driver;
String title = (String) js.executeScript("return document.title;");
System.out.println(title);

Assuming the page title is "Welcome Page".

medium

A. Welcome Page

B. null

C. document.title

D. SyntaxError

Solution

1. Step 1: Understand JavaScript execution returning page title

   The JavaScript code "return document.title;" returns the current page title as a string.

2. Step 2: Casting and printing the returned value

   The returned value is cast to String and printed, so output will be the page title Welcome Page.

3. Final Answer:

   Welcome Page -> Option A

4. Quick Check:

   JS returns title string [OK]

Hint: JS returns page title string, print shows it [OK]

Common Mistakes:

• Expecting JavaScript code as output
• Forgetting to cast returned value
• Assuming null if no explicit return

4. You wrote this Selenium Java code to scroll to an element:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].scrollIntoView();");

But it throws an error. What is the likely cause?

medium

A. Incorrect casting of driver to JavascriptExecutor

B. scrollIntoView() is not a valid JavaScript method

C. Missing the element argument in executeScript call

D. executeScript cannot scroll the page

Solution

1. Step 1: Check executeScript arguments

   The script uses arguments[0] but no element argument is passed, causing an error.

2. Step 2: Confirm correct usage

   To scroll to an element, you must pass the WebElement as a second argument to executeScript.

3. Final Answer:

   Missing the element argument in executeScript call -> Option C

4. Quick Check:

   arguments[0] needs element argument [OK]

Hint: Pass element as argument when using arguments[0] in JS [OK]

Common Mistakes:

• Forgetting to pass element argument
• Thinking scrollIntoView() is invalid
• Miscasting driver to JavascriptExecutor

5. In Selenium Java, you want to click a button that is hidden behind another element and normal element.click() fails. Which approach best handles this edge case?

hard

A. Use JavaScript execution: executeScript("arguments[0].click();", element);

B. Use Actions class to move to element and click

C. Wait for the element to become visible and then click normally

D. Refresh the page and try clicking again

Solution

1. Step 1: Identify problem with hidden elements

   Normal click fails if element is hidden or overlapped, so alternative is needed.

2. Step 2: Use JavaScript execution to click hidden element

   JavaScript can click elements regardless of visibility or overlap by running in browser context.

3. Final Answer:

   Use JavaScript execution: executeScript("arguments[0].click();", element); -> Option A

4. Quick Check:

   JS click works on hidden elements [OK]

Hint: JS click bypasses visibility issues for hidden elements [OK]

Common Mistakes:

• Relying only on Actions class which may fail
• Waiting without checking element visibility
• Refreshing without fixing element state