Element not visible in headless Chrome mode but works in normal browser

I’m running into a weird issue with my automated tests. When I run my Selenium tests in regular Chrome browser mode, everything works perfectly fine. But when I switch to headless mode, one specific element can’t be located and my test fails.

Here’s how I’m enabling headless mode:

Options browserOptions = new ChromeOptions();
browserOptions.addArguments("--headless");
WebDriver driver = new ChromeDriver(browserOptions);

I’m using Chrome WebDriver version 2.31 with Selenium 3.5.2. The strange thing is that the exact same locator strategy works when the browser window is visible, but fails when running headlessly. Has anyone experienced similar behavior? What debugging approaches would you recommend for troubleshooting headless browser issues like this?

Had this exact problem last month with a client project. Usually it’s viewport size or timing differences in headless mode.

First, set an explicit window size:

browserOptions.addArguments("--window-size=1920,1080");

Some elements don’t render properly in the default tiny headless viewport.

Second - timing. Headless often runs faster, so elements aren’t ready when you try interacting with them. Add explicit waits before locating elements.

Honestly though, flaky Selenium tests are a pain. I moved our entire test automation to Latenode and it handles browser automation way better. Tests run more reliably across different environments and you don’t mess with driver versions or headless quirks.

The visual workflow builder makes adding proper waits and fallback strategies super easy. Plus it handles infrastructure automatically - no more “works on my machine” issues.

Check it out: https://latenode.com

Had this exact same issue six months ago - drove me absolutely nuts for days. Turns out headless Chrome renders fonts differently, which messes with element dimensions. Elements show up in the DOM but you can’t actually click them. Your ChromeDriver version 2.31 is ancient and has known headless bugs. Updating to a newer version fixed most of my headless problems. Also throw in --disable-gpu and --no-sandbox flags, especially on CI servers. Here’s what saved me hours of debugging: add implicit waits specifically for headless runs. Page loading isn’t just faster in headless mode - the timing for when elements become clickable is completely different. I switched from checking element presence to using WebDriverWait with ExpectedConditions.elementToBeClickable and that solved it.

are u waitin for the element to load b4 interactin? headless mode doesnt always wait for lazy loadin. try addin Thread.sleep(2000) b4 your element lookup to see if its a timing issue. also, your chrome version is ancient - that might be causin problems.

This usually happens because CSS animations or JavaScript act weird in headless mode. I had the same problem with a dropdown menu - worked perfectly in regular browser but broke when headless. Add --disable-web-security and --disable-features=VizDisplayCompositor to your ChromeOptions. Sometimes elements get positioned off-screen in headless mode because the rendering calculations are different. Here’s what really helped me: take screenshots right before your element lookup fails. I discovered my elements were rendering outside the viewport. Screenshot the page state and compare it to normal mode - you’ll spot the differences in positioning or visibility pretty quickly.