Chrome headless WebDriver fails to execute JavaScript content in Selenium automation tests

[Alex_Brave]

I’m working on automated testing for my web application using Selenium WebDriver with Chrome in headless mode. The basic functionality works fine like page navigation and title verification, but I’m having issues with JavaScript-generated content not appearing during test execution.

HTML Structure

My webpage contains this container:

<section id="content-wrapper">
    <div id="panel_a"></div>
    <div id="panel_b"></div>
    <div id="panel_c"></div>
    <div id="panel_d"></div>
</section>

JavaScript Implementation

The dynamic content gets populated through this script:

document.addEventListener("DOMContentLoaded", function() {
    loadPanelData();
});

WebDriver Configuration

I’ve configured Chrome with these settings:

ChromeOptions chromeConfig = new ChromeOptions();
chromeConfig.addArguments(
    "--headless=new",
    "--disable-gpu",
    "--no-sandbox",
    "--disable-dev-shm-usage",
    "--enable-javascript",
    "--disable-web-security",
    "--window-size=1920,1080",
    "--disable-features=VizDisplayCompositor"
);

Test Implementation

I’m using explicit waits to handle the async content:

WebDriverWait waitCondition = new WebDriverWait(webDriver, Duration.ofSeconds(30));
waitCondition.until(ExpectedConditions.presenceOfElementLocated(By.id("panel_a_data")));

Despite waiting, the JavaScript-generated elements never appear in the DOM. The test keeps timing out. Is this a configuration issue with headless Chrome or should I modify my JavaScript loading approach?

[alexlee]

I encountered a similar problem with headless Chrome. One key difference in headless mode is how Chrome handles certain web APIs, impacting JavaScript execution. First, remove the --disable-web-security flag as it can interfere with JavaScript in the latest Chrome versions. Instead, consider adding --disable-features=TranslateUI and --disable-ipc-flooding-protection flags. Your loadPanelData() function might be facing timing issues, so you could add a brief Thread.sleep before your wait condition to ensure everything loads properly or modify your wait to check for specific content rather than just the presence of elements, as headless Chrome can sometimes process JavaScript differently than expected.

[CharlieLion22]

try using javascriptExecutor to check if your loadPanelData function actually runs. headless chrome sometimes blocks certain js apis. add this before your wait: ((JavascriptExecutor) driver).executeScript("return document.readyState").equals("complete") - should help debug what’s happening with the js execution.

[SilentSailing34]

I ran into this exact issue recently. The problem was headless Chrome ignoring the --window-size parameter during initial page load, which broke the responsive JavaScript. Here’s what worked for me: set the viewport manually with JavaScriptExecutor right after navigating - ((JavascriptExecutor) driver).executeScript("window.resizeTo(1920, 1080);"); Also, ExpectedConditions.presenceOfElementLocated won’t cut it for dynamic content. Use ExpectedConditions.textToBePresentInElementLocated instead, or write a custom condition that checks if your panels actually have the content you expect, not just that they exist in the DOM.