無法從帶有 Selenium 的下拉菜單中找到或 select select 元素 - 元素不可見

Question

編輯：

[https://www.bellsofsteel.us/checkout/][1]

我無法使用 selenium 從下拉菜單中找到或 select 選項。我試圖通過遍歷包含城市、州和 zip 代碼的列表來獲取商品的各種稅費和運費

select 元素的 HTML 如下：

<span class="woocommerce-input-wrapper">
    <select name="billing_state" id="billing_state" class="state_select select2-hidden-accessible"        autocomplete="address-level1" data-placeholder="State" data-input-classes="" data-label="State /     County" tabindex="-1" aria-hidden="true">
    <option value="">Select an option…</option>
    <option value="AL">Alabama</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    .........
    <option value="WY">Wyoming</option>
    </select>

    <span class="select2 select2-container select2-container--default select2-container--above select2-container--open" dir="ltr" style="width: 100%;">
       <span class="selection">
         <span class="select2-selection select2-selection--single" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-label="State / County" role="combobox" aria-owns="select2-billing_state-results" aria-activedescendant="select2-billing_state-result-og2a-AR">
        <span class="select2-selection__rendered" id="select2-billing_state-container" role="textbox" aria-readonly="true">
          <span class="select2-selection__placeholder">State</span> 
        </span>
        <span class="select2-selection__arrow" role="presentation">
           <b role="presentation"></b>
        </span>
         </span>
      </span>
    <span class="dropdown-wrapper" aria-hidden="true">
    </span>
</span>

我試過這個：

dropdown1 = Select(driver.find_element(By.CSS_SELECTOR, 'select[name="billing_state"]'))
dropdown1.select_by_visible_text('California')

哪個返回錯誤：

Message: element not interactable: Element is not currently visible and may not be manipulated

我也使用了預期條件

element_present = EC.text_to_be_present_in_element((By.CSS_SELECTOR,'select[name="billing_state"]'),item[1])
                WebDriverWait(driver, 20).until(element_present)

這將超時。

我可以 select 實際的下拉菜單

element_present = EC.element_to_be_clickable((By.CSS_SELECTOR, 'span.selection')
WebDriverWait(driver, 30).until(element_present)
driver.find_element(By.CSS_SELECTOR, 'span.selection').click()

這將打開下拉菜單但不會使元素可點擊

任何幫助將不勝感激！

在這里發布了一些我一直在使用的代碼，這些是我嘗試過的：

###This will click on the drop down menu so that you can see it open in the selenium window:
element_present = EC.element_to_be_clickable((By.CSS_SELECTOR, 'span.selection'))
WebDriverWait(driver, 30).until(element_present)
try:
    driver.find_element(By.CSS_SELECTOR, 'span.selection').click()
except:
    clicker = driver.find_element(By.CSS_SELECTOR, 'span.selection')
    driver.execute_script("arguments[0].click();", clicker)

##This attempts to select from the select options:

dropdown1 = Select(driver.find_element(By.CSS_SELECTOR, 'select[name="billing_state"]'))
dropdown1.select_by_visible_text('California')

本質上是相同的，但跨度 class 直接處理 select 元素（收到點擊但沒有下拉菜單）

###This will click on the drop down menu so that you can see it open in the selenium window:
element_present = EC.element_to_be_clickable((By.CSS_SELECTOR, 'span.woocommerce-input-wrapper'))
WebDriverWait(driver, 30).until(element_present)
try:
    driver.find_element(By.CSS_SELECTOR, 'span.woocommerce-input-wrapper').click()
except:
    clicker = driver.find_element(By.CSS_SELECTOR, 'span.woocommerce-input-wrapper')
    driver.execute_script("arguments[0].click();", clicker)

##This attempts to select from the select options:

dropdown1 = Select(driver.find_element(By.CSS_SELECTOR, 'select[name="billing_state"]'))
dropdown1.select_by_visible_text('California')

兩者都返回以下內容：

Message: element not interactable: Element is not currently visible and may not be manipulated

當我手動單擊該選項時，我可以看到 HTML 從以下位置更改：

<span class="select2-selection__rendered" id="select2-billing_state-container" role="textbox" aria-readonly="true">
 <span class="select2-selection__placeholder">State</span> 

到

<span class="select2-selection__rendered" id="select2-billing_state-container" role="textbox" aria-readonly="true" title="California">California</span>

我想我可以像這樣 f string literal the title ：

element_present = EC.element_to_be_clickable((By.CSS_SELECTOR, 'span.select2-selection__rendered'))
WebDriverWait(driver, 30).until(element_present)
driver.find_element(By.CSS_SELECTOR, 'span.select2-selection__rendered').click()


element_present = EC.element_to_be_clickable((By.CSS_SELECTOR, element_present_click(f'span[title=\"California\"]'))
WebDriverWait(driver, 30).until(element_present)
driver.find_element(By.CSS_SELECTOR, element_present_click(f'span[title=\"California\"]').click()               

但它也超時了。

還嘗試按值 select ：

driver.find_element(By.CSS_SELECTOR, 'span.selection').click()
dropdown1 = Select(driver.find_element(By.CSS_SELECTOR, 'select[name="billing_state"]'))
dropdown1.select_by_value('CA')

同樣的事情 - 元素不可交互

Answer 1

該下拉列表不是“Select”類型元素，它是“ul”類型元素，因此您不能使用 Select。

在結帳頁面中，添加以下代碼並嘗試：

# scrolling to the element - 'First name' label
first_name_label = driver.find_element(By.XPATH, ".//label[@for='billing_first_name']")
driver.execute_script("arguments[0].scrollIntoView(true)", first_name_label)

# clicking on the 'State / County' dropdown
driver.find_element(By.XPATH, "(.//*[@aria-label='State / County'])[1]").click()
sleep(1)
# getting the list of all the states
list_of_states = driver.find_elements(By.CSS_SELECTOR, "#select2-billing_state-results li")

# state name to be selected
state_to_select = "South Dakota"
i = 0

# select the state
for state in list_of_states:
    if state.text == state_to_select:
        driver.find_element(By.XPATH, ".//ul[@id='select2-billing_state-results']/li[" + str(i + 1) + "]").click()
        break
    i += 1