I am encountering a problem with clicking on a submenu option in a dropdown menu on my webpage. The dropdown menu is created using 'span' and 'li' elements, and it contains options that have submenus visible when you click on the parent menu. When I use the UI browser (chrome or firefox), this code works fine:
webDriver.findElement(By.xpath("//span[contains(text(), '" + menuOption + "')]"));
However, when I try to run the same code in headless mode for the same browser, I receive an error:
org.openqa.selenium.ElementNotInteractableException: element not interactable
I have experimented with different strategies such as selecting the parent before clicking on the child node, but the results are consistent:
webDriver.findElement(By.xpath("//span[contains(text(), '" + sItemActionMenu + "')]")).isSelected();
webDriver.findElement(By.xpath("//span[contains(text(), '" + menuOption + "')]"));
I have explored various solutions including using JavascriptExecutor, waiting for the 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
Unfortunately, none of these solutions provide a clear answer or resolve my issue even after attempting the JavascriptExecutor method:
JavascriptExecutor js = (JavascriptExecutor) DriverFactory.getDriver();
WebElement weItemMenu = webDriver.findElement(By.xpath("//span[contains(text(), '" + menuOption + "')]"));
The specific section of code I am trying to access is:
<div class="menu-panel-wrapper" style="top: 0px; left: 1384.83px;">
...
...
...
</li>
</ul>
</div>
For confidentiality reasons, I cannot share the exact menu structure, but the referenced code snippet accurately reflects its layout.
I have also attempted the following approach:
webDriver.findElement(By.xpath("//ul[@id=\"$pNavi1614647592355$pElements$5\"]//li//span[contains(text(), '" + menuOption + "')]")).click();
However, this does not work for either the UI browser or the headless one. In all the scenarios described above, 'menuOption' represents a variable passed to determine the specific submenu option to click on (e.g., MenuItem1, Menu Item 2, Menu Item3, etc.)
If anyone has suggestions on how to successfully click on a submenu option in the provided code structure, please advise. These submenu options appear to be initially hidden and only become visible once their parent option is selected in the UI.