# Dropdown error: element not interactable

**URL:** <https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676>\
**Category:** Web Testing\
**Tags:** katalon-studio\
**Created:** [August 24, 2021, 10:06am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676 "2021-08-24T10:06:08Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![a.sharapova](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@a.sharapova](https://forum.katalon.com/u/a.sharapova)\
**Post date:** [August 24, 2021, 10:06am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/1 "2021-08-24T10:06:08Z")

</div>

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?

 ![Screenshot_1](https://europe1.discourse-cdn.com/katalon/original/3X/7/9/79c7d19351e901d2ae85a7d4b8941909011b31b1.png)  
 ![Screenshot_2](https://europe1.discourse-cdn.com/katalon/original/3X/1/1/1104a09968f29193cd738e1f1346635211ba0988.png) ![Screenshot_3](https://europe1.discourse-cdn.com/katalon/original/3X/9/b/9bb802e3ccbbdfec7c2ccb4639cc7348c77504f9.png)

---

<div class="post-metadata">

**Author:** ![loc.nguyen](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/loc.nguyen/32/17513_2.png) [@loc.nguyen](https://forum.katalon.com/u/loc.nguyen)\
**Post date:** [August 24, 2021, 10:10am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/2 "2021-08-24T10:10:53Z")

</div>

Hi guy,

Hope this link will help: [https://docs.katalon.com/katalon-studio/docs/how\_handle\_drop\_down\_menu.html#what-is-drop-down](https://docs.katalon.com/katalon-studio/docs/how_handle_drop_down_menu.html#what-is-drop-down)

FYI.

---

<div class="post-metadata">

**Author:** ![a.sharapova](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@a.sharapova](https://forum.katalon.com/u/a.sharapova)\
**Post date:** [August 24, 2021, 1:38pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/3 "2021-08-24T13:38:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![grylion54](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/grylion54/32/16265_2.png) [@grylion54](https://forum.katalon.com/u/grylion54)\
**Post date:** [August 24, 2021, 2:28pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/4 "2021-08-24T14:28:16Z")

</div>

> [@a.sharapova](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Brandon\_Hein](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/brandon_hein/32/1092_2.png) [@Brandon\_Hein](https://forum.katalon.com/u/Brandon_Hein)\
**Post date:** [August 24, 2021, 2:34pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/5 "2021-08-24T14:34:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![a.sharapova](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@a.sharapova](https://forum.katalon.com/u/a.sharapova)\
**Post date:** [August 24, 2021, 3:14pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/6 "2021-08-24T15:14:22Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![a.sharapova](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@a.sharapova](https://forum.katalon.com/u/a.sharapova)\
**Post date:** [August 30, 2021, 6:16am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/7 "2021-08-30T06:16:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![grylion54](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/grylion54/32/16265_2.png) [@grylion54](https://forum.katalon.com/u/grylion54)\
**Post date:** [August 30, 2021, 3:40pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/8 "2021-08-30T15:40:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![a.sharapova](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@a.sharapova](https://forum.katalon.com/u/a.sharapova)\
**Post date:** [August 31, 2021, 12:59pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/10 "2021-08-31T12:59:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![grylion54](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/grylion54/32/16265_2.png) [@grylion54](https://forum.katalon.com/u/grylion54)\
**Post date:** [August 31, 2021, 4:48pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/11 "2021-08-31T16:48:29Z")

</div>

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.

```auto
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();

```

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [September 1, 2021, 12:30am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/12 "2021-09-01T00:30:48Z")

</div>

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

- [https://rushop.se.com/](https://rushop.se.com/)

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](https://developer.chrome.com/docs/devtools/overview/). 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.

 ![rushop_se_com](https://europe1.discourse-cdn.com/katalon/original/3X/5/b/5bee0f773c223719bd392ed92678488b6aa19398.png)

@a.sharapova wrote

```auto
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.

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [September 1, 2021, 12:40am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/13 "2021-09-01T00:40:49Z")

</div>

- [https://rushop.se.com/](https://rushop.se.com/)

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.

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [September 1, 2021, 2:42am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/14 "2021-09-01T02:42:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![a.sharapova](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@a.sharapova](https://forum.katalon.com/u/a.sharapova)\
**Post date:** [September 1, 2021, 10:25am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/15 "2021-09-01T10:25:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![a.sharapova](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@a.sharapova](https://forum.katalon.com/u/a.sharapova)\
**Post date:** [September 1, 2021, 10:28am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/16 "2021-09-01T10:28:46Z")

</div>

> [@kazurayam](#):
>
> 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.

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

> [@kazurayam](#):
>
> @media query may complicates UI testing a lot. But UI testers are requested to adopt to it anyway.

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.

> [@kazurayam](#):
>
> Then, which URL path ( `/` , `/katalon.html` ) does @a.sharapova want to look at?

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 😊

---

<div class="post-metadata">

**Author:** ![faezeh.moghtaderi](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/faezeh.moghtaderi/32/16104_2.png) [@faezeh.moghtaderi](https://forum.katalon.com/u/faezeh.moghtaderi)\
**Post date:** [March 29, 2022, 4:32am UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/17 "2022-03-29T04:32:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![grylion54](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/grylion54/32/16265_2.png) [@grylion54](https://forum.katalon.com/u/grylion54)\
**Post date:** [March 29, 2022, 3:29pm UTC](https://forum.katalon.com/t/dropdown-error-element-not-interactable/57676/18 "2022-03-29T15:29:19Z")

</div>

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?
