元素不可交互：元素当前不可见，可能无法操作

Question

硒的新手！我正在尝试使用selenium在Craigslist上列出待售房屋。

我在从下拉选择框中选择选项时遇到问题。

from selenium import webdriver

driver = webdriver.Chrome(executable_path=r'D:/apps/chromedriver/chromedriver.exe')
driver.get('https://post.craigslist.org/k/tKNKfCkr6hG7ghq71YXqTA/oj7w8?s=edit')

driver.find_element_by_css_selector("select.housing_type > option[value='6']").click()

我收到以下错误：

元素不可操作异常：消息：元素不可交互：元素当前不可见，可能无法操作

使用“选择”也会产生同样的错误:

from selenium.webdriver.support.ui import Select

housing_type = Select(driver.find_element_by_css_selector("select.housing_type"))
housing_type.select_by_visible_text('house')

该元素存在:

housing_type = driver.find_element_by_css_selector("select.housing_type")
housing_type

但这并不是棘手的：

housing_type.click()

元素不可交互异常： 消息： 元素不可交互

我注意到选择元素是隐藏的，选择由选择框上的下一个元素控制。

<label class="json-form-item select housing_type std variant-select">
    <div class="label-wrapper"><span class="label">housing type</span></div>
    <select tabindex="1" name="housing_type" class="json-form-input no-js housing_type" id="ui-id-1" style="display: none;">
    <option value="1" selected="">apartment</option>
    <option value="2">condo</option>
    <option value="3">cottage/cabin</option>
    <option value="4">duplex</option>
    <option value="5">flat</option>
    <option value="6">house</option>
    <option value="7">in-law</option>
    <option value="8">loft</option>
    <option value="9">townhouse</option>
    <option value="10">manufactured</option>
    <option value="11">assisted living</option>
    <option value="12">land</option>
    </select>
    <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="ui-id-1-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="ui-id-1-menu" aria-haspopup="true" style="width: 88%;">
        <span class="ui-icon ui-icon-triangle-1-s"></span>
        <span class="ui-selectmenu-text">apartment</span>
    </span>
</label>

我可以通过激活元素并使用向下/返回键进行选择，如下所示，但这不是一个优雅的解决方案。

from selenium.webdriver.common.keys import Keys

housing_type = driver.find_element_by_id("ui-id-1-button")
housing_type.click()
for i in range(0,5):
    housing_type.send_keys(Keys.DOWN)
housing_type.send_keys(Keys.RETURN)

有没有更好的方法进行选择？

Answer 1

不幸的是，这似乎是如何使用覆盖/下拉列表的问题。

我注意到选择元素是隐藏的，选择由选择框上的下一个元素控制。

由于下拉列表的可见性由某些叠加层控制，因此您将被迫单击下拉按钮以激活叠加层并使下拉按钮可见。下拉按钮变得可见后，您应该能够使用Selenium代码而不会出现进一步的问题。也就是说，这个代码片段应该很好用：

housing_type = Select(driver.find_element_by_css_selector("select.housing_type"))
housing_type.select_by_visible_text('house')

我建议使用这种方法，而不是使用< code >键。DOWN动作，因为这是对Selenium内置功能的更好的利用

Answer 2

要从您提供的页面上的住房类型下拉列表中选择一个项目，我将首先调用下拉框上的WebDriver等待以确保它存在，然后再尝试与之交互。然后，您可以使用Javascript单击下拉触发器并展开选项。

之后，我们再次调用< code>WebDriverWait来点击我们想要点击的选项。下面的代码示例将单击选项“平面”:

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


# start driver
driver = webdriver.Chrome(executable_path=r'D:/apps/chromedriver/chromedriver.exe')
driver.get('https://post.craigslist.org/k/tKNKfCkr6hG7ghq71YXqTA/oj7w8?s=edit')

# wait for dropdown to exist
WebDriverWait(driver, 15).until(EC.presence_of_element_located((By.XPATH, "//label[contains(@class, 'housing_type')]")))

# expand housing type dropdown using javascript
dropdown_trigger = driver.find_element_by_xpath("//label[contains(@class, 'housing_type')]/span/span[contains(@class, 'ui-icon')]")
driver.execute_script("arguments[0].click();", dropdown_trigger)

# select an option -- this selects 'flat'
dropdown_option = WebDriverWait(driver, 15).until(EC.presence_of_element_located((By.XPATH, "//li[text()='flat']")))
dropdown_option.click()