Selenium JavaScript executor for shadow root element works fine in normal browser but does not work in chrome headless browser

Question

I'm testing a chrome extension using selenium 4.3.0 with Java and to open a chrome extension I have to get extension id which keeps on changing for every new build developers provide. To overcome this and not hardcode extension id in code, I though to fetch it from chrome extension page. For that I have to deal with #shadow-root (open) element.

Below is image of HTML structure with element highlighted with box which I want to fetch.

I'm trying below code to fetch id which works perfectly fine when using chrome browser with UI.

JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement webElement = (WebElement) js.executeScript("return document.querySelector(\"body > extensions-manager\").shadowRoot.querySelector(\"#items-list\").shadowRoot.querySelector(\"extensions-item\")");

But when I use headless mode to launch chrome browser with below code

ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.addArguments("--headless");
chromeOptions.addExtensions(new File("Chrome_Extension.crx"));
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver(chromeOptions);

all of a sudden same code stops working and I'm getting error: org.openqa.selenium.JavascriptException: javascript error: Cannot read properties of null (reading 'shadowRoot')

Any help on why would it work on normal mode but not in headless mode would be highly appreciated.

Alternatively if someone has a better approach to fetch extension id of a chrome extension, then please do let me know.

Answer 1

Actually I got it to work, it seems chromeOptions.addArguments("--headless"); does not work for chrome extensions. Updating it to

chromeOptions.addArguments("--headless=chrome");

works just perfect.

Got this information from here