0

I have a button that when I click it I will get a sort of a dropdown list. My problem is that I want to click one of the options in this dropdown list but I don't see how to refer to it.

I have tried to act as if this was a list box and I used the "Select" module but I failed with exceptions. My purpose is to be able to refer to any of the options in this dropdown list. Could it be that the HTML code is missing a unique href value ?

<input name="Port 19" value="Uplink" class="ExtendedButton" onclick="SelectFrame('Uplink-200')" id="Port-19" style="width: 84px; display: inline;" type="button">
<script>writeUplinkDropDown()</script>
<div class="dropdown-content">
<a href="#" onclick="SelectFrame("Uplink-200")">200G</a>  
<a href="#" onclick="SelectFrame("Port-19")">100G #1</a>  
<a href="#" onclick="SelectFrame("Port-20")">100G #2</a>
</div>
Moshe S.
  • 2,834
  • 3
  • 19
  • 31
  • 3
    Share your code and exception – Andersson Feb 06 '18 at 15:57
  • @Monshe: Can you provide the full page source, so that we can check the xpath hierarchy for the drop down items? – Nishant Patel Feb 06 '18 at 15:58
  • I get this problem in some website, you cant click item in dropdown list cause its hide, first have to click in "some element" that opens the dropdown list. Post website or section of code – Wonka Feb 06 '18 at 16:47

2 Answers2

2

First thing you will need to do is open the dropdown menu. Once the menu is open you can click on any of those options you posted by using any of the following selector examples:

driver.find_elements_by_css_selector('a[onclick="SelectFrame(\"Uplink-200\")"]')
driver.find_elements_by_css_selector('a[onclick="SelectFrame(\"Port-19\")"]')
driver.find_elements_by_css_selector('a[onclick="SelectFrame(\"Port-20\")"]')
tehbeardedone
  • 2,833
  • 1
  • 15
  • 23
  • 1
    Thanks. What I was missing was the sequence of actions. For some reason I managed to locate the elements with their xpath and CSS but when I tried to use their "click()" method I got the ElementNotInteractableException (exception). My only worry now is that I cannot predict the menu's behavior and it can be closed before I will be able to click the options inside it. What do you think ? a try.. catch with several retries will do the work ? – Moshe S. Feb 07 '18 at 05:40
  • Why can't you predict the menu's behavior? What code are you using to open it? What might it do in between opening it and finding/clicking a link? – Ian Lesperance Feb 07 '18 at 23:49
  • I don't know why. But, When I maximize the window the menu doesn't persist too long. I am not so sure that it will act different when the browser is not maximized (most of the time it does). I am clicking "Port-19" and then the menu appears. Because this menu is found over a panel that we refresh from time to time there is a chance that the refresh will make it disapear – Moshe S. Feb 08 '18 at 08:07
  • That sounds like a usability issue. I'd recommend you figure out what is causing the menu to disappear and make it stop, rather than codifying it into your tests. – Ian Lesperance Feb 08 '18 at 13:14
0

Selenium's Select class only works with native <select> elements. Because you have implemented a dropdown with custom HTML, you won't be able to use it.

Instead, in order to select one of the options in your custom dropdown, you'll need to perform each of the actions that a real user would:

  • clicking the button that opens the dropdown, then
  • clicking the link for the desired option.

Note: When searching for elements on a page, always try to use the same criteria that a real user would. A real user would look for a link with some meaningful text, e.g., "200G"; they would not go scouring the source code looking for a particular onclick attribute. (What's more, the onclick attribute is a part of the implementation of the page, not the interface, and shouldn't be relied upon as such, as it could change at any time.)

1. Using Selenium

Selenium doesn't provide an explicit method for finding buttons, but you can use CSS or XPath to do that:

driver.find_element_by_css_selector("input[type='button'][value='Uplink']")
driver.find_element_by_xpath("//input[@type = 'button'][@value = 'Uplink']")

To find links, Selenium conveniently provides find_element_by_link_text():

driver.find_element_by_link_text("200G").click()
driver.find_element_by_link_text("100G #1").click()
driver.find_element_by_link_text("100G #2").click()

2. Using Capybara (which uses Selenium)

Bare Selenium can be fickle. The link may not yet be in the DOM. Or it may not yet be visible.

capybara-py addresses these problems transparently:

page.click_button("Uplink")

page.click_link("200G")
page.click_link("100G #1")
page.click_link("100G #2")
Ian Lesperance
  • 4,961
  • 1
  • 26
  • 28
  • Thanks for the answer. I can locate the links by their text but it can only be accomplished after I clicked "Port-19" – Moshe S. Feb 08 '18 at 08:03