Skip to content
CodeKruPro

Modify the DOM with JavascriptExecutor

61/70

Modify DOM with JavaScript

JavaScript can modify the page DOM directly. This is useful for testing hidden elements or changing element properties.

On the Text Messages page, hiddenText has visibility: hidden.

Task:

  1. Navigate to https://testkru.com/Elements/TextMessages
  2. Use JavaScript to make the hidden text visible
  3. Verify it's now displayed and print its text

Expected output:

Before JS: false
After JS: true
Text: A Hidden Text

About this lesson

Make a hidden element visible in Selenium Java by changing its style with JavaScript

Learn Selenium JavaAdvancedJavaScript Executor

How it works

JavaScript can change any part of the DOM, including styles. On Text Messages, hiddenText has visibility: hidden set in its style attribute. A script that sets arguments[0].style.visibility to 'visible' shows it, and WebDriver sees the change at once: isDisplayed() turns true and getText() returns the paragraph's words.

The change lives only in this browser tab. Reloading the page brings back the original HTML, and nothing is saved on the server.

Making something visible this way is a test technique, not user behaviour. It is useful for reading content a test cannot reach otherwise, but a user would never see that element, so assertions that depend on it describe the DOM, not the user experience.

About the assignment

The starter gives you the executor and the hidden paragraph. You check its visibility, change its style with a script, check its visibility again and read the text that is now shown.

What you will do

  1. Print isDisplayed() after the label Before JS:.
  2. Run a script that sets the element's style.visibility to visible, passing the element as arguments[0].
  3. Print isDisplayed() again after the label After JS:.
  4. Print the element's getText() after the label Text:.

Common mistakes

  • Changing display instead of visibility

    This element is hidden with visibility. Setting display to block changes nothing, because its display is already block.

  • Reading the text before the change

    getText() returns an empty string for a hidden element, so read it after the script.

  • Expecting the change to survive navigation

    Any reload or get() restores the original page. Run the script again after navigating.

In a real test suite

Testers use DOM changes to remove a cookie banner that blocks a test, to reveal a hidden file input before sendKeys() uploads a file, or to fill hidden fields during setup. Keep such changes in setup steps and say why in a comment.

Lesson 60 clicked with JavaScript. Lesson 62 moves to screenshots, starting with the whole visible page.

Related lessons

To try one of these calls on any page without a task, open the Online Selenium Java Compiler.

Starter code

The editor above opens with this code. Fill in the TODO lines, then run and submit it.

Main.java
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;

public class Main {
    public static void main(String[] args) throws Exception {
        WebDriver driver = new ChromeDriver();
        driver.get("https://testkru.com/Elements/TextMessages");
        
        JavascriptExecutor js = (JavascriptExecutor) driver;
        WebElement hiddenElement = driver.findElement(By.id("hiddenText"));
        
        // TODO: Print isDisplayed() before modification
        // TODO: Use JS to make it visible
        // TODO: Print isDisplayed() after and its text
        
        driver.quit();
    }
}
Next lessonTake Viewport ScreenshotAll lessons in the courseLearn Selenium Java