Handling hidden elements in Selenium Java - Build an Automation Script

Verify interaction with a hidden element on a web page

Preconditions (2)

Step 1: Navigate to the test page URL

Step 2: Locate and click the 'Show' button to reveal the hidden button

Step 3: Wait until the hidden button is visible

Step 4: Click the now visible hidden button

Step 5: Verify that clicking the hidden button triggers the expected action (e.g., a message appears)

✅ Expected Result: The hidden button becomes visible after clicking 'Show', can be clicked, and triggers the expected action

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Assert the hidden button is not visible before clicking 'Show'

Assert the hidden button is visible after clicking 'Show'

Assert the expected action occurs after clicking the hidden button

Best Practices:

Use explicit waits (WebDriverWait) to wait for element visibility

Use By locators with IDs or unique attributes

Avoid Thread.sleep; use waits instead

Handle NoSuchElementException and ElementNotInteractableException properly

Automated Solution

Selenium Java

import org.openqa.selenium.By;
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.*;
import java.time.Duration;

public class HiddenElementTest {
    private WebDriver driver;
    private WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        // Set path to chromedriver executable if needed
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    }

    @Test
    public void testHiddenElementInteraction() {
        driver.get("https://example.com/test-hidden-element");

        By showButtonLocator = By.id("show-button");
        By hiddenButtonLocator = By.id("hidden-button");
        By messageLocator = By.id("message");

        // Assert hidden button is not visible initially
        assertTrue(driver.findElements(hiddenButtonLocator).size() > 0, "Hidden button should be present in DOM");
        WebElement hiddenButton = driver.findElement(hiddenButtonLocator);
        assertFalse(hiddenButton.isDisplayed(), "Hidden button should not be visible initially");

        // Click the 'Show' button
        WebElement showButton = driver.findElement(showButtonLocator);
        showButton.click();

        // Wait until hidden button is visible
        wait.until(ExpectedConditions.visibilityOfElementLocated(hiddenButtonLocator));

        // Click the now visible hidden button
        hiddenButton = driver.findElement(hiddenButtonLocator); // re-find element
        hiddenButton.click();

        // Verify expected action: message appears
        WebElement message = wait.until(ExpectedConditions.visibilityOfElementLocated(messageLocator));
        assertEquals("Button clicked!", message.getText(), "Expected message after clicking hidden button");
    }

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

This test uses Selenium WebDriver with Java and JUnit 5.

Setup: We create a ChromeDriver instance and a WebDriverWait with 10 seconds timeout.

Test steps:

• Navigate to the test page URL.
• Check the hidden button is present in the page but not visible initially.
• Click the 'Show' button to reveal the hidden button.
• Use explicit wait to wait until the hidden button becomes visible.
• Click the now visible hidden button.
• Wait for the expected message to appear and verify its text.

Teardown: Close the browser after the test.

This approach avoids using Thread.sleep and uses explicit waits for reliability. It also re-finds the hidden button after it becomes visible to avoid stale element issues.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() to wait for the hidden element to appear

Trying to click the hidden element before it is visible

Using XPath with absolute paths for locating elements

Not handling NoSuchElementException when element is not found

Bonus Challenge

Now add data-driven testing with 3 different URLs where the hidden button behaves similarly

Show Hint

Practice

1. Which Selenium method helps to check if an element is visible on the page?

easy

A. isEnabled()

B. isDisplayed()

C. getText()

D. click()

Solution

1. Step 1: Understand visibility check methods

   The isDisplayed() method returns true if the element is visible on the page.

2. Step 2: Compare other methods

   isEnabled() checks if element is enabled, getText() gets text, and click() performs click action, none check visibility.

3. Final Answer:

   isDisplayed() -> Option B

4. Quick Check:

   Visibility check = isDisplayed() [OK]

Hint: Use isDisplayed() to check visibility quickly [OK]

Common Mistakes:

• Confusing isEnabled() with visibility check
• Using getText() to check visibility
• Trying to click before checking visibility

2. Which of the following is the correct syntax to click a hidden element using JavaScript in Selenium Java?

easy

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

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

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

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

Solution

1. Step 1: Cast driver to JavascriptExecutor

   In Selenium Java, to run JavaScript, cast WebDriver to JavascriptExecutor: ((JavascriptExecutor)driver).

2. Step 2: Use executeScript method correctly

   Call executeScript with JavaScript code and element as argument: executeScript("arguments[0].click();", element);

3. Final Answer:

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

4. Quick Check:

   Correct JS click syntax = ((JavascriptExecutor)driver).executeScript("arguments[0].click();", element); [OK]

Hint: Cast driver to JavascriptExecutor before executeScript [OK]

Common Mistakes:

• Calling executeScript directly on driver without casting
• Using wrong method names like execute()
• Incorrect object references for JavascriptExecutor

3. What will be the output of the following code snippet if the element is hidden?

WebElement element = driver.findElement(By.id("hiddenBtn"));
boolean visible = element.isDisplayed();
System.out.println(visible);

medium

A. false

B. true

C. null

D. Throws NoSuchElementException

Solution

1. Step 1: Understand isDisplayed() behavior

   The isDisplayed() method returns false if the element exists but is hidden (not visible).

2. Step 2: Check element presence

   Since findElement finds the element by id, no exception is thrown. The element is hidden, so isDisplayed() returns false.

3. Final Answer:

   false -> Option A

4. Quick Check:

   Hidden element visibility = false [OK]

Hint: isDisplayed() returns false for hidden elements [OK]

Common Mistakes:

• Assuming isDisplayed() throws exception if element is hidden
• Confusing false with null
• Expecting true without checking visibility

4. Identify the error in this code snippet that tries to click a hidden element:

WebElement element = driver.findElement(By.id("hiddenBtn"));
element.click();

medium

A. No error, element.click() works on hidden elements

B. Throws NoSuchElementException because element is missing

C. Throws ElementNotVisibleException because element is hidden

D. Throws StaleElementReferenceException due to stale element

Solution

1. Step 1: Understand click behavior on hidden elements

   Trying to click a hidden element using element.click() causes ElementNotVisibleException because Selenium cannot interact with invisible elements.

2. Step 2: Check element presence

   The element is found, so no NoSuchElementException. It is not stale, so no StaleElementReferenceException.

3. Final Answer:

   Throws ElementNotVisibleException because element is hidden -> Option C

4. Quick Check:

   Click hidden element error = ElementNotVisibleException [OK]

Hint: Clicking hidden elements throws ElementNotVisibleException [OK]

Common Mistakes:

• Assuming click works on hidden elements
• Confusing NoSuchElementException with visibility issues
• Ignoring exception types for stale elements

5. You want to click a button that is hidden by default and only visible after scrolling. Which approach is best to handle this in Selenium Java?

hard

A. Use JavascriptExecutor to scroll element into view, then use element.click()

B. Directly call element.click() without scrolling

C. Use Thread.sleep() to wait and then click

D. Use Actions class to move to element and then click

Solution

1. Step 1: Scroll element into view using JavaScript

   Hidden elements due to scrolling can be made visible by scrolling them into view with JavascriptExecutor: executeScript("arguments[0].scrollIntoView(true);", element);

2. Step 2: Click the now visible element

   After scrolling, use element.click() to interact safely with the visible element.

3. Final Answer:

   Use JavascriptExecutor to scroll element into view, then use element.click() -> Option A

4. Quick Check:

   Scroll then click = JavascriptExecutor + click [OK]

Hint: Scroll element into view before clicking hidden buttons [OK]

Common Mistakes:

• Clicking without scrolling causes exceptions
• Using Thread.sleep() instead of scrolling
• Relying only on Actions class without scrolling