How to navigate a dropdown triggered by JavaScript using Python Selenium

Question

I am trying to navigate a dropdown button that operates via JavaScript. However, no matter what I try, the HTML list items it should have never seem to show up in selenium.

An image of the dropdown button:

Inspector page source:

<div class="dropdown" style="border-bottom: 1px solid #ebebeb; padding-bottom: 2px;">
     <a class="btn btn-default btn-sm" onclick="$(this).parent().toggleClass('open')" title="Select an Event" style="width: 220px">
         <span id="event-selection-span-id">No event selected.</span>
              <span class="fa fa-caret-down routing-toolbar-menu"></span>
     </a>
     <ul class="dropdown-menu user-dropdown dropdown-menu-left" id="call-events-list-id">
     <li title="ADRC Archived Call" event_definition_id="2f617fc5-c0b0-492a-92e2-561c39c239fc" form_code="AACOG_ADRC_CCC_ARCH" onclick="CallCenter.SetEvent(this)" class="list-group-item event-group-list-item">ADRC Archived Call</li>
     <li title="ADRC Information  Call" event_definition_id="0a22deba-4788-4647-bee6-47305e182eca" form_code="AACOG_ADRC_CCC" onclick="CallCenter.SetEvent(this)" class="list-group-item event-group-list-item">ADRC Information  Call</li>
     </ul>
</div>

Selenium page source:

<div class="dropdown open" style="border-bottom: 1px solid #ebebeb; padding-bottom: 2px;">
     <a class="btn btn-default btn-sm" onclick="$(this).parent().toggleClass('open')" title="Select an Event" style="width: 220px">
           <span id="event-selection-span-id">No event selected.</span>
                 <span class="fa fa-caret-down routing-toolbar-menu"></span>
     </a>
     <ul class="dropdown-menu user-dropdown dropdown-menu-left" id="call-events-list-id"></ul>
</div>

Here is what I've tried so far, all unsuccessful:

• Originally just tried finding the elements and using the .click() method to click in them. (e.g. driver.find_element_by_xpath('//*[@id="step-3"]/div[2]/a').click() then driver.find_element_by_xpath('//*[@id="call-events-list-id"]/li[2]').click(). Selenium could not find the list element in the second line.

• Then I tried a method that's worked for me before when the previous one didn't: finding the elements then using driver.execute_script("arguments[0].click()", btn) for each one. Like before, it worked for the main dropdown button but not the list item that should show up afterwords.

• So I figured I could just execute the javascript manually with the elements' JS paths using driver.execute_script("$(document.querySelector('#step-3 > div.dropdown > a')).parent().toggleClass('open');") then driver.execute_script("CallCenter.SetEvent(document.querySelector('#call-events-list-id > li:nth-child(2)'));"). This still didn't work and the list elements still did not show up in selenium's page source.

The strangest thing is the list elements show up in the inspector before you even click the main dropdown button. Therefore I should just be able to execute the second JS line manually with no problems, and that works fine when I do it in the browser. I have also tried just waiting for the list elements to show up when the source is loaded but they never show up no matter how long I set the delay for.

Answer 1

First to click on the element with text as Select an Event and then from the dropdown to click on the element with title as ADRC Information you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.btn.btn-default.btn-sm[title='Select an Event']"))).click()
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.btn.btn-default.btn-sm[title='Select an Event'] +ul#call-events-list-id li[title='ADRC Information  Call']"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[@class='btn btn-default btn-sm' and @title='Select an Event']"))).click()
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[@class='btn btn-default btn-sm' and @title='Select an Event']//following::ul[@id='call-events-list-id']//li[@title='ADRC Information  Call']"))).click()
  

• Note: You have to add the following imports :

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC