如何使用 Selenium 正确抓取基于 AJAX 的动态下拉搜索结果

秋瑶小哥_7225

秋瑶小哥_7225

2026-09-02

478人浏览

原创

如何使用 Selenium 正确抓取基于 AJAX 的动态下拉搜索结果

本文详解如何解决 Selenium 中因误操作隐藏元素导致的 ElementNotInteractableException 异常,聚焦于正确识别并交互页面中可见的 AJAX 搜索输入框(而非不可见的 元素),并稳定提取动态加载的马匹名称。

本文详解如何解决 selenium 中因误操作隐藏元素导致的 `elementnotinteractableexception` 异常,聚焦于正确识别并交互页面中可见的 ajax 搜索输入框(而非不可见的 `

在使用 Selenium 抓取依赖 AJAX 的搜索型下拉列表(如印度赛马网站 indiarace.com 的马名搜索)时,一个常见误区是:误将页面中静态存在的 <select></select> 元素当作可交互目标。实际上,该 <select></select> 元素通常被 CSS 隐藏(display: nonevisibility: hidden),仅作为 Select2 等前端库的底层数据容器;真正接收用户输入、触发异步请求并渲染候选结果的是其关联的可见 <input>

原始代码中:

select_element = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, '.form-control.search_header.js-data-example-ajax')))

定位的是一个不可见的 <select></select>,因此调用 .send_keys() 会直接抛出 ElementNotInteractableException——Selenium 严格模拟真实用户行为,无法向不可见/禁用/被遮挡的元素发送输入。

✅ 正确做法是定位 Select2 组件中暴露给用户的搜索输入框。根据目标页面结构(经审查 DOM 可确认),应使用以下选择器获取可见且可交互的输入框:

search_input = wait.until(
    EC.visibility_of_element_located((By.CSS_SELECTOR, "form.home-search-horse input.select2-search__field"))
)

该元素具备以下关键特征:

AJAX技术—无刷新获取数据相关课件
AJAX技术—无刷新获取数据相关课件

AJAX技术—无刷新获取数据相关课件

下载
  • 位于 <form class="home-search-horse"></form> 内;
  • <input> 标签,且具有 class="select2-search__field"
  • 页面加载后即可见(visibility_of_element_located 保证其渲染完成且非 display:none);
  • 支持 .send_keys() 触发 AJAX 请求,并在 DOM 中动态生成匹配项(通常为 <li><div> 形式的下拉选项,而非 <code><option></option>)。

    ⚠️ 注意事项:

    • 勿再尝试 .find_elements_by_tag_name('option'):因为真实结果并非 <select><option></option></select> 结构,而是由 JavaScript 动态插入的列表项(如 <ul class="select2-results__options"></ul> 下的 <li>)。需改用更鲁棒的选择器,例如:
      # 等待下拉结果出现(最多等待5秒)
      results = wait.until(
          EC.presence_of_all_elements_located((By.CSS_SELECTOR, ".select2-results__option"))
      )
      for item in results:
          horse_names.add(item.text.strip())
    • 每次输入后需清空输入框:避免累积输入(如 abcabcd),应在循环内添加 search_input.clear()
    • 增加显式等待与防抖:AJAX 响应有延迟,建议用 EC.invisibility_of_element_located 等待旧结果消失,再等待新结果出现,比固定 time.sleep(2) 更可靠;
    • 处理无结果情况:部分三字母组合可能无匹配项,需捕获 TimeoutException 并跳过;
    • 遵守网站 robots.txt 与反爬策略:高频请求可能触发封禁,建议添加合理延时(如 time.sleep(0.5))并设置 User-Agent

    完整修正示例(精简核心逻辑):

    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
    from selenium.common.exceptions import TimeoutException, NoSuchElementException
    import time
    
    driver = webdriver.Chrome()
    driver.get("https://www.indiarace.com/Home/horseStatistics/")
    wait = WebDriverWait(driver, 10)
    
    # ✅ 正确定位可见的 AJAX 搜索输入框
    search_input = wait.until(
        EC.visibility_of_element_located((By.CSS_SELECTOR, "form.home-search-horse input.select2-search__field"))
    )
    
    horse_names = set()
    
    for letter1 in range(ord('a'), ord('z') + 1):
        for letter2 in range(ord('a'), ord('z') + 1):
            for letter3 in range(ord('a'), ord('z') + 1):
                query = f"{chr(letter1)}{chr(letter2)}{chr(letter3)}"
    
                # 清空并输入
                search_input.clear()
                search_input.send_keys(query)
    
                try:
                    # 等待结果列表出现
                    results = wait.until(
                        EC.presence_of_all_elements_located((By.CSS_SELECTOR, ".select2-results__option"))
                    )
                    for elem in results:
                        text = elem.text.strip()
                        if text and not text.startswith("No results found"):
                            horse_names.add(text)
                except TimeoutException:
                    pass  # 无结果,跳过
    
                time.sleep(0.3)  # 轻量防抖
    
    print(f"共采集到 {len(horse_names)} 个唯一马名:")
    for name in sorted(horse_names)[:20]:  # 打印前20个示例
        print(name)
    
    driver.quit()

    总结:解决 ElementNotInteractableException 的本质在于精准区分“逻辑容器”与“交互入口”。面对封装良好的前端组件(如 Select2、Vue Autocomplete),务必通过浏览器开发者工具审查实际响应用户输入的 DOM 节点,而非文档中静态存在的表单控件。以用户视角思考、用可见性/可点击性条件替代简单存在性判断,是编写健壮 Selenium 自动化脚本的关键原则。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

ajax

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python打包成可执行文件
python打包成可执行文件

本专题为大家带来python打包成可执行文件相关的文章,大家可以免费的下载体验。

2023.07.20

1551

4

python能做什么
python能做什么

python能做的有:可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

2023.07.25

3664

7

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.31

1569

3

python教程
python教程

Python已成为一门网红语言,即使是在非编程开发者当中,也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章,大家可以免费体验学习。

2023.08.03

20877

23

python环境变量的配置
python环境变量的配置

Python是一种流行的编程语言,被广泛用于软件开发、数据分析和科学计算等领域。在安装Python之后,我们需要配置环境变量,以便在任何位置都能够访问Python的可执行文件。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.04

2587

5

python eval
python eval

eval函数是Python中一个非常强大的函数,它可以将字符串作为Python代码进行执行,实现动态编程的效果。然而,由于其潜在的安全风险和性能问题,需要谨慎使用。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.04

2647

5

scratch和python区别
scratch和python区别

scratch和python的区别:1、scratch是一种专为初学者设计的图形化编程语言,python是一种文本编程语言;2、scratch使用的是基于积木的编程语法,python采用更加传统的文本编程语法等等。本专题为大家提供scratch和python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

1063

5

python合并两个列表
python合并两个列表

Python是一种强大的编程语言,具有许多方便的功能和工具。在Python中,有多种方法可以合并两个列表。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.10

576

4

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2043

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery官方API文档
jQuery官方API文档

共0课时 | 0人学习

Symfony教程(入门篇+基础篇)
Symfony教程(入门篇+基础篇)

共18课时 | 1.8万人学习