Interact with Dropdown with a "nesty-input" class using Selenium?

Question

I am trying to automate complaints with the FCC. I'm having trouble interacting with a dropdown box located at https://consumercomplaints.fcc.gov/hc/en-us/requests/new?ticket_form_id=39744 . The element is the Phone Issues dropdown box:

The HTML is:

<div class="form-field string  required  request_custom_fields_22619354" >
  <label id="request_custom_fields_22619354_label" for="request_custom_fields_22619354">Phone Issues</label>
  <input type="hidden" name="request[custom_fields][22619354]" id="request_custom_fields_22619354" autocomplete="off" data-tagger="[{&quot;label&quot;:&quot;-&quot;,&quot;value&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Unwanted Calls (including do not call and spoofing)&quot;,&quot;value&quot;:&quot;telemarketing_phone&quot;},{&quot;label&quot;:&quot;Junk Faxes&quot;,&quot;value&quot;:&quot;junk_faxes_phone&quot;},{&quot;label&quot;:&quot;Availability&quot;,&quot;value&quot;:&quot;availability_phone&quot;},{&quot;label&quot;:&quot;Billing&quot;,&quot;value&quot;:&quot;billing_phone&quot;},{&quot;label&quot;:&quot;Cramming (unauthorized charges on your phone bill)&quot;,&quot;value&quot;:&quot;cramming_phone&quot;},{&quot;label&quot;:&quot;Equipment&quot;,&quot;value&quot;:&quot;equipment_phone&quot;},{&quot;label&quot;:&quot;Interference&quot;,&quot;value&quot;:&quot;interference_phone&quot;},{&quot;label&quot;:&quot;Number Portability (keeping your number if you change providers)&quot;,&quot;value&quot;:&quot;number_portability_phone&quot;},{&quot;label&quot;:&quot;Privacy&quot;,&quot;value&quot;:&quot;privacy_phone&quot;},{&quot;label&quot;:&quot;Rural Call Completion&quot;,&quot;value&quot;:&quot;rural_call_completion_phone&quot;},{&quot;label&quot;:&quot;Slamming (change of your carrier without permission)&quot;,&quot;value&quot;:&quot;slamming_phone&quot;}]" aria-required="true" aria-describedby="request_custom_fields_22619354_hint" aria-labelledby="request_custom_fields_22619354_label" />

  <p id="request_custom_fields_22619354_hint">Please select the issue that best describes your complaint.</p>
</div>

I want to select index 1 or the text Unwanted Calls (including do not call and spoofing). (Index 0 is the text with the dash).

Here are my three attempts, but they are producing exceptions:

dropdown_issue = driver.find_element_by_id("request_custom_fields_22619354")

# First try - ElementNotInteractableException
dropdown_issue.send_keys("Unwanted Calls");

# Second try - ElementNotInteractableException
dropdown_issue.send_keys(Keys.DOWN);
dropdown_issue.send_keys(Keys.DOWN);
dropdown_issue.send_keys(Keys.ENTER);

# Third try - 'WebElement' object has no attribute 'select_by_index'
dropdown_issue.select_by_index(1)

I think I need to go up to the "nesty-input", which has the down arrow (but no name or id). I am not sure how to access the nesty-input.

How do I select the desired index for the dropdown control?

Answer 1

UPDATE

Use WebDriverWait to make sure element visible and use Select to handle dropdown.

You need wait until this is element visible:

By.XPATH -> //label[text()="Phone Issues"]//following-sibling::a[@class="nesty-input ae-exclude"]

And the select element is:

By.ID -> ae-request_custom_fields_22619354

Please try the below code:

driver.get('https://consumercomplaints.fcc.gov/hc/en-us/requests/new?ticket_form_id=39744')
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, '//label[text()="Phone Issues"]//following-sibling::a[@class="nesty-input ae-exclude"]')))
elmt = driver.find_element_by_id('ae-request_custom_fields_22619354')
select = Select(elmt)
select.select_by_index(1)

#select by other method
select.select_by_value('telemarketing_phone')
select.select_by_visible_text('Unwanted Calls (including do not call and spoofing)')

Following import:

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

Answer 2

To select the element with text as Unwanted Calls (including do not call and spoofing) within the dropdown box adjacent to Phone Issues located within the website you need to induce WebDriverWait for the visibility_of_element_located() and you can use the following Locator Strategies:

• Code Block:

  from selenium import webdriver
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  
  options = webdriver.ChromeOptions()
  options.add_argument("start-maximized")
  #options.add_argument("--headless")
  #options.add_experimental_option("excludeSwitches", ["enable-automation"])
  #options.add_experimental_option('useAutomationExtension', False)
  driver = webdriver.Chrome(options=options, executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
  driver.get("https://consumercomplaints.fcc.gov/hc/en-us/requests/new?ticket_form_id=39744")
  driver.execute_script("scroll(0, 400)")
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//p[text()='Please select the issue that best describes your complaint.']//preceding::a[1]"))).click()
  WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//p[text()='Please select the issue that best describes your complaint.']//preceding::select[@class='ae-select' and starts-with(@id, 'ae-request_custom_fields')]//option[contains(., 'Unwanted Calls')]"))).click()
  

• Browser Snapshot: