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

Question

新手到硒！我正在尝试使用硒在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

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

之后，我们在要单击的选项上再次调用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()

Answer 2

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

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

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

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

我建议使用这种方法，而不是使用Keys.DOWN操作的替代方案，因为这样可以更好地利用Selenium的内置函数。