使用Selenium+Python点击LinkedIn筛选按钮遇ElementNotInteractableException异常

问题详情 #

在LinkedIn选择筛选条件后，尝试点击「Show results」按钮，已定位到按钮元素，但触发以下错误：

selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable: [object HTMLDivElement] has no size and location

尝试过的代码：

element = WebDriverWait(self, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, 'div[class="artdeco-hoverable-content__shell"]')))                
box = self.find_element_by_css_selector('div[class="artdeco-hoverable-content__shell"]')
ele = box.find_element_by_css_selector('button[data-control-name="filter_show_results"]')
        
ActionChains(self).move_to_element(ele).click(ele).perform()

也试过用JS点击：

self.execute_script("arguments[0].click();", ele)

按钮对应的HTML结构：

<div class="reusable-search-filters-buttons display-flex justify-flex-end mt3 ph2">
      <button data-test-reusables-filter-cancel-button="true" data-control-name="filter_pill_cancel" aria-label="Cancel Locations filter" id="ember429" class="artdeco-button artdeco-button--muted artdeco-button--2 artdeco-button--tertiary ember-view" type="button"><!---->
<span class="artdeco-button__text">
    Cancel
</span></button>
      <button data-test-reusables-filter-apply-button="true" data-control-name="filter_show_results" aria-label="Apply current filter to show results" id="ember430" class="artdeco-button artdeco-button--2 artdeco-button--primary ember-view ml2" type="button"><!---->
<span class="artdeco-button__text">
    Show results
</span></button>
  </div>

补充信息：

• 按钮截图：筛选面板底部右侧可见蓝色「Show results」按钮，左侧为灰色「Cancel」按钮
• 开发者工具截图：按钮的HTML结构与上述代码一致，无隐藏属性

错误原因 #

1. 父容器定位错误：你选择的artdeco-hoverable-content__shell容器并非按钮的有效父级，这个div可能是一个无尺寸的隐藏元素，导致通过它定位的按钮被判定为不可交互。
2. 等待条件不充分：presence_of_element_located仅保证元素存在于DOM中，但LinkedIn的筛选面板有加载动画，元素存在时可能还未完成渲染，没有尺寸和位置信息，无法被点击。
3. 元素实例重复：页面中可能存在多个属性相同的「Show results」按钮，你定位到的是一个不可见的实例（比如后台未激活的筛选面板中的按钮），导致触发交互错误。

解决建议 #

• 直接定位目标按钮：跳过无效父容器，使用更精准的选择器直接定位按钮，比如利用测试属性：

  ele = WebDriverWait(self, 10).until(
      EC.element_to_be_clickable((By.CSS_SELECTOR, 'button[data-test-reusables-filter-apply-button="true"]'))
  )
  ele.click()
  

  或者通过aria-label定位：

  ele = WebDriverWait(self, 10).until(
      EC.element_to_be_clickable((By.CSS_SELECTOR, 'button[aria-label="Apply current filter to show results"]'))
  )
  ele.click()
  

• 更换等待条件：用element_to_be_clickable替代presence_of_element_located，这个条件会等待元素可见且可点击，确保渲染完成。
• 滚动到按钮位置：如果按钮被页面元素遮挡，先滚动到按钮区域再点击：

  ele = WebDriverWait(self, 10).until(
      EC.element_to_be_clickable((By.CSS_SELECTOR, 'button[data-control-name="filter_show_results"]'))
  )
  self.execute_script("arguments[0].scrollIntoView(true);", ele)
  ele.click()
  

• 缩小定位范围：结合按钮的父容器类名，避免定位到重复元素：

  ele = WebDriverWait(self, 10).until(
      EC.element_to_be_clickable((By.CSS_SELECTOR, 'div.reusable-search-filters-buttons button[data-control-name="filter_show_results"]'))
  )
  ele.click()
  

内容的提问来源于stack exchange，提问作者glitch_123