Selenium unable to click on element using headless browser, but same code works fine with a UI browser

Question

I have a page which contains a dropdown menu (created using 'span' and 'li' elements). The dropdown menu has some options which have a submenu also, hat is visible when you click on the parent menu (code given below). When using the UI browser (chrome or firefox), I use a simple:

webDriver.findElement(By.xpath("//span[contains(text(), '" + menuOption + "')]"));

And the above code works, but when I use the same in the headless mode for the same browser, it does not work and gives an error:

org.openqa.selenium.ElementNotInteractableException: element not interactable

I have tried using the following to select the parent and then click on the child node, but similar result:

webDriver.findElement(By.xpath("//span[contains(text(), '" + sItemActionMenu + "')]")).isSelected();
webDriver.findElement(By.xpath("//span[contains(text(), '" + menuOption + "')]"));

Have gone through and checked the other solutions available, using JavascriptExecutor, Wait for Element to be visible, etc:

Unable to Click Button with Headless Selenium Browser

Click on hidden element Selenium webdriver(javascript)

Selenium - cannot click on hidden element

Selenium - Unable to click on link from dropdown list

But none give a clear answer and the solutions provided do not solve my issue, even tried with JavascriptExecutor:

    JavascriptExecutor js = (JavascriptExecutor) DriverFactory.getDriver();
    WebElement weItemMenu = webDriver.findElement(By.xpath("//span[contains(text(), '" + menuOption + "')]"));

The code that I am trying to click through is:

<div class="menu-panel-wrapper" style="top: 0px; left: 1384.83px;"> 
    <ul class="menu menu-format-standard menu-regular" role="menu" id="pyNavi1614647592355" data-menu-id="-pyNavi1614647592355" style="display: block; top: 0px; left: 0px; max-height: 570px;">     
        <li class="menu-item menu-item-enabled" role="presentation" data-childnodesid="$pNavi1614647592355$pElements$5" id="menu-item-$pNavi1614647592355$pElements$5"> 
            <a href="#" onclick="pd(event);" class="menu-item-anchor menu-item-expand" tabindex="0" role="menuitem" aria-haspopup="true">
                <span class="menu-item-title-wrap" data-click=".">
                <span class="menu-item-title" data-click="..">Parent MenuItem</span>
                </span>
            </a>
            <div class="menu-panel-wrapper" style="top: 1px; left: 245.547px; border-left: 17px solid transparent;">
                <ul class="menu menu-format-standard menu-regular" role="menu" id="$pNav1614647592355$pElements$5" data-menu-id="-2" style="display: none; max-height: 570px;">
                <li class="menu-item menu-item-enabled" role="presentation"> 
                    <a href="#" onclick="pd(event);" class="menu-item-anchor " tabindex="0" role="menuitem" data-ctl="" data-click="[[&quot;setMobileTransition&quot;,[&quot;mobile.trans.NONE&quot;]],[&quot;createNewWork&quot;,[&quot;GM-Work-Prog&quot;,&quot;&quot;,&quot;pStartCs&quot;,&quot;&amp;ProcessType=MenuItem1&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,{}]]]">
                        <span class="menu-item-title-wrap" data-click="."><span class="menu-item-title" data-click="..">MenuItem1</span></span>
                    </a>
                </li>
                <li class="menu-item menu-item-enabled menu-item-active" role="presentation"> 
                    <a href="#" onclick="pd(event);" class="menu-item-anchor " tabindex="0" role="menuitem" data-ctl="" data-click="[[&quot;setMobileTransition&quot;,[&quot;mobile.trans.NONE&quot;]],[&quot;createNewWork&quot;,[&quot;GM-Work-Prog&quot;,&quot;&quot;,&quot;pStartCs&quot;,&quot;&amp;ProcessType=MenuItem2 &quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,{}]]]">
                        <span class="menu-item-title-wrap" data-click="."><span class="menu-item-title" data-click="..">Menu Item 2</span></span>
                    </a>
                </li>
                <li class="menu-item menu-item-enabled" role="presentation">
                    <a href="#" onclick="pd(event);" class="menu-item-anchor " tabindex="-1" role="menuitem" data-ctl="" data-click="[[&quot;setMobileTransition&quot;,[&quot;mobile.trans.NONE&quot;]],[&quot;createNewWork&quot;,[&quot;GM-Work-Prog&quot;,&quot;&quot;,&quot;pStartCs&quot;,&quot;&amp;ProcessType=MenuItem3&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,{}]]]">
                        <span class="menu-item-title-wrap" data-click="."><span class="menu-item-title" data-click="..">Menu Item 3</span></span>
                    </a>
                </li>
                <li class="menu-item menu-item-enabled" role="presentation">
                    <a href="#" onclick="pd(event);" class="menu-item-anchor " tabindex="-1" role="menuitem" data-ctl="" data-click="[[&quot;setMobileTransition&quot;,[&quot;mobile.trans.NONE&quot;]],[&quot;createNewWork&quot;,[&quot;GM-Work-Prog&quot;,&quot;&quot;,&quot;pStartCs&quot;,&quot;&amp;ProcessType=MenuItem4&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,{}]]]">
                        <span class="menu-item-title-wrap" data-click="."><span class="menu-item-title" data-click="..">MenuItem4</span></span>
                    </a>
                </li>
                <li class="menu-item menu-item-enabled" role="presentation">
                    <a href="#" onclick="pd(event);" class="menu-item-anchor " tabindex="-1" role="menuitem" data-ctl="" data-click="[[&quot;setMobileTransition&quot;,[&quot;mobile.trans.NONE&quot;]],[&quot;createNewWork&quot;,[&quot;GM-Work-Prog&quot;,&quot;&quot;,&quot;pStartCs&quot;,&quot;&amp;ProcessType=MenuItem5&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,{}]]]">
                        <span class="menu-item-title-wrap" data-click="."><span class="menu-item-title" data-click="..">MenuItem5</span></span>
                    </a>
                </li>
                <li class="menu-item-separator" role="separator">&nbsp;</li>
                <li class="menu-item menu-item-enabled" role="presentation">
                    <a href="#" onclick="pd(event);" class="menu-item-anchor " tabindex="-1" role="menuitem" data-ctl="" data-click="[[&quot;setMobileTransition&quot;,[&quot;mobile.trans.NONE&quot;]],[&quot;createNewWork&quot;,[&quot;GM-Work-Prog&quot;,&quot;&quot;,&quot;pStartCs&quot;,&quot;&amp;ProcessType=MenuItem6&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,{}]]]">
                        <span class="menu-item-title-wrap" data-click="."><span class="menu-item-title" data-click="..">Menu Item6</span></span>
                    </a>
                </li>
                <li class="menu-item menu-item-enabled" role="presentation">
                    <a href="#" onclick="pd(event);" class="menu-item-anchor " tabindex="-1" role="menuitem" data-ctl="" data-click="[[&quot;setMobileTransition&quot;,[&quot;mobile.trans.NONE&quot;]],[&quot;createNewWork&quot;,[&quot;GM-Work-Prog&quot;,&quot;&quot;,&quot;pStartCs&quot;,&quot;&amp;ProcessType=MenuItem7&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,{}]]]">
                        <span class="menu-item-title-wrap" data-click="."><span class="menu-item-title" data-click="..">Menu Item7</span></span>
                    </a>
                </li>
                </ul>
            </div>          
        </li>
    </ul>
</div>

The menu looks similar to this (cannot give the actual one, due to constraints, but the code is real/correct with names changed):

I have even tried to use the following:

webDriver.findElement(By.xpath("//ul[@id=\"$pNavi1614647592355$pElements$5\"]//li//span[contains(text(), '" + menuOption + "')]")).click();

But that does not work for both UI browser or the headless one. In all the above examples, the 'menuOption' is a variable which is being passed to determine the name (e.g. MenuItem1, Menu Item 2, Menu Item3, etc.)

Any suggestions on how to get to click on the subMenu Option in the above code? This option seems to be initially 'hidden' and when the parent option is selected in the UI, it shows the child options.

By submenu you mean Text and Image? Is View Data as clickable? — vitaliis, Apr 22 '21 at 02:07
Did you try using ActionChains? In what language is your framework? Is `Text` opened on click or on hover? — vitaliis, Apr 22 '21 at 02:16
By submenu I mean "Text". The "View Data as" is clickable, but if I click it, it closes the menu, so have to use hover. The framework is in Java (using serenity and maven to build). "Text" is opened on click, not hover, as that is the last menu option, unlike the "Image". — gagneet, Apr 22 '21 at 03:28
Yes that one is unique. Even all the child menu options using span and text() are unique. — gagneet, Apr 22 '21 at 04:40
I'll post one option. Do not judge too strictly. I did not do automation in Java for a while. — vitaliis, Apr 22 '21 at 04:49

vitaliis · Accepted Answer · 2021-04-22T04:56:22.760

If I correctly understand the actions you do: you move to the first element, then move to the second and click it. Try waiting until the first element is clickable and use Actions class like this:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class Click {
    private final WebDriver driver;
    private By parentMenu = By.xpath("//span[contains(text(), 'Parent MenuItem')]");
    private By subMenu = By.xpath("//span[contains(text(), 'MenuItem5')]");

    public Click(WebDriver driver) {
        this.driver = driver;
    }

    public Click clickSubMenu() {
        WebDriverWait wait = new WebDriverWait(driver, 15);
        wait.until(ExpectedConditions.elementToBeClickable(parentMenu));
        Actions action = new Actions(driver);
        action.moveToElement(driver.findElement(parentMenu)).moveToElement(driver.findElement(subMenu)).click().build().perform();
        return this;
    }
}

If elementToBeClickable won't work visibilityOfElementLocated may be a better option in this case.

Thanks, that worked perfectly fine for both UI and headless :-) — gagneet, Apr 22 '21 at 04:55

Selenium unable to click on element using headless browser, but same code works fine with a UI browser

1 Answers1