Dropdown error: element not interactable

Hey!
I am quite a beginner tester. I create a test in manual mode.
There is a dropdown menu that has another dropdown menu nested. An attempt to click on an item in the second menu returns an error :невесёлый:

Tried shooting subjects in different modes but didn’t help. What could be the problem?


Hi guy,

Hope this link will help: https://docs.katalon.com/katalon-studio/docs/how_handle_drop_down_menu.html#what-is-drop-down

FYI.

So sad, but the methods on the link give an error: Element should have been “select” but was “li”

I have only seen that message when someone has tried to use “selectOptionByLabel”, “selectOptionByValue” or “selectOptionByIndex” method, which I don’t see in your code above.

What I think you should try is to “collect” your links (“a” tags) in a List<WebElement> and loop through them to choose one.

I also think that the root of the problem may be that you are targeting those <li> elements. You should be clicking on the <a> elements. If you can share the locator that you are using in your test object, we could help you out with that.

Sorry for mistakes. Of course, the click is on the element. Here is a locator for a non-working element: //*[@id=“mobileMenuWrap”]/nav/ul/li[5]/ul/li[2]/ul/li[2]/a (on XPath)

(Magic! If you remove the focus on the second menu item, then the test is marked as PASSED, although the action on click does not occur)

Alas, even if the test is marked as passed, the action does not actually take place(

Are you still getting the same error as what you posted in the first post? If so, you may need to add some “wait” or “delay” statements, such as WebUI.waitForPageLoad(10), until the web pages catch up to your script. If not, then we need to see what is the current concern.

Hey!
Yes, there is the same error with a nested dropdown menu.
I tried changing the selectors (suddenly it is incorrectly defined),
use such operators as Delay, Wait For Element Visible / Clickable,
Verify Element Visible / Clickable.
Our developers were unable to provide any clue. And since I’m just getting started, I can’t even think of what specifically I need to google.

Can you check if the xpath to your element is like below? You can always copy and paste the actually HTML class into the below. That way there would be no spelling mistake.

//li[@class="nav-2-2-1 navigation__list navigation__category_level-2"]/a

Another option may be to collect all the <a> tags and click on one that way. Again, maybe you can copy and paste the HTML class information to make sure there is no spelling mistake.

WebDriver driver = DriverFactory.getWebDriver();

List<WebElement> items = driver.findElements(By.xpath('//li[contains(@class="navigation__list  navigation__category_level-2")]/a'));

WebUI.comment("Found ${items.size()} items")

items.get(1).click();

@a.sharapova showed us, the URL of the target web app. That is

I looked at this page with Chrome DevTools, and found that the HTML of this site is a hard one for UI testers and E2E test tools.


You should look at this site in detail using Chrome Dev Tools. Using DevTools, Please try to find the element, of which XPath is

//*[@id="mobileMenuWrap"]/nav/ul/li[5]/ul/li[2]/ul[contains(@class,'dropdown-menu')]

. Yes, the element is found in the DOM. However, that element has CSS property visiblitiy with value of hidden.

As long as the element has the visiblity of value hidden, @a.sharapova, you will certainly encounter the “element not interactable” error and would never be able to click that element by test scripts.

@a.sharapova wrote

WebUI.focus(findTestObject('OformlenieZakaza/Navigation/2Katalong/2-2-rozet'))

I suppose that he/she did this to turn the visibility property from “hidden” to “visible” by calling WebUI.focus(). However I thought that WebUI.focus() is not enough; he/she needs WebUI.click() and WebUI.waitForElementVisible(). So I tried to examine it. When I tried clicking the [Katalog] menu, to my surprise, I was forced to jump to another URL. In other words, I could not turn a dropdown menu in that page visible.

So I gave up.

@a.sharapova

Do you desperately want to click the <a> element of xpath //*[@id=“mobileMenuWrap”]/nav/ul/li[5]/ul/li[2]/ul/li[2]/a ?

To me, it looks impossible, as the HTML forces you not to do it.

I guess, you are just learning & playing on the page; you might not necessarily stick to clicking that element. — then, you should just give it up. Forget it. And look at other issues.

1 Like

This URL is visible on PC but it seems to be designed primarily for browsers on Mobile devices with smaller screen. I found that this page is designed for Mobile devices using @media query in CSS a lot. For example, when i opened a browser with 800px width, the nav menu entirely disappeared. When I extend it to wider width, the nav menu reappeared.

@media query may complicates UI testing a lot. But UI testers are requested to adopt to it anyway.

The https://rushop.se.com/ makes me wonder. For example, when I clicked the menu [Каталог] on PC, it jumped to another URL https://rushop.se.com/katalog.html . Then, which URL path ( / , /katalon.html ) does @a.sharapova want to look at?

Unfortunately, this does nothing. Yes, I have copied and pasted the HTML class,
but the click is still not possible.

This is the best advice. Seriously. I really like him.

I will pay more attention to this issue. I will try to consult with our developers. Although other projects also contain @media in CSS, the implementation is different and similar problems do not arise.

As a result, the transition to /rozetki/rozetki-elektricheskie.html should have been made, but any normally working menu would suit me.

Thanks a lot, now I can at least have an idea of ​​where this problem came from. I just ran into it right at the start of the study of automation, and therefore could not let go just like that :blush:

Hey, could you solve your issue with dropdown? I have encountered the same problem.

Even though you have the “same problem”, it could be caused by different events. How about giving some more information and then we can assist you better?