使用Selenium和WebDriverWait解决动态网页产品数量抓取问题

使用Selenium和WebDriverWait解决动态网页产品数量抓取问题

本教程旨在解决使用`beautifulsoup`抓取动态网页产品数量时遇到的空值问题。文章将详细介绍如何利用`selenium`模拟浏览器行为,并通过`webdriverwait`机制确保目标元素完全加载并可见,从而成功提取动态加载的产品数量数据。内容涵盖`selenium`的基本设置、等待条件的运用以及两种健壮的元素定位策略。

动态网页数据抓取:从BeautifulSoup到Selenium

在进行网页数据抓取时,开发者常会遇到一个普遍问题:使用BeautifulSoup等静态解析库无法获取到某些看似存在于页面上的数据,最终返回空值。这通常是因为目标网页采用了JavaScript动态加载内容。BeautifulSoup只能解析requests库获取到的原始HTML响应,而无法执行页面上的JavaScript代码,因此那些由JavaScript在页面加载后动态生成或修改的内容,BeautifulSoup自然无法“看到”。

例如,当尝试从一个电商网站抓取产品总数时,如果该数量是通过异步请求(AJAX)获取并在页面上渲染的,那么在requests.get()返回的初始HTML中,该产品数量的占位符可能为空或根本不存在,导致BeautifulSoup.find()方法返回None。

为了解决这一问题,我们需要一个能够模拟真实浏览器行为、执行JavaScript并等待页面完全渲染的工具。Selenium正是为此而生。

Selenium简介与环境准备

Selenium是一个强大的浏览器自动化测试框架,但它同样适用于处理动态网页抓取任务。通过Selenium,我们可以启动一个真实的浏览器(如Chrome、Firefox),让它访问目标URL,等待页面上的JavaScript执行完毕,然后像用户一样与页面进行交互(点击按钮、填写表单),最后再从完全渲染的页面中提取数据。

环境准备:

安装Selenium库:

pip install selenium

下载WebDriver:Selenium需要一个与你使用的浏览器版本匹配的WebDriver。例如,如果你使用Chrome浏览器,需要下载ChromeDriver。ChromeDriver: https://www.php.cn/link/687b8dedbbf281200b402ba6fe58232dGeckoDriver (for Firefox): https://www.php.cn/link/9a1ecce2d381e29ac81279bdae9886bd下载后,请将WebDriver的可执行文件放置在系统PATH环境变量中,或在代码中指定其路径。

核心机制:WebDriverWait与Expected Conditions

即使使用Selenium,页面上的动态内容也需要时间来加载。直接在页面加载后立即尝试查找元素可能会因为元素尚未渲染完成而失败。WebDriverWait是Selenium中用于处理这种异步加载情况的关键工具。它允许我们设置一个最长等待时间,并在此期间内反复检查某个“期望条件”(expected_conditions)是否满足。一旦条件满足,它会立即返回;如果超出最长等待时间仍未满足,则会抛出TimeoutException。

常用的expected_conditions包括:

visibility_of_element_located(): 元素在DOM中存在且可见。element_to_be_clickable(): 元素可见并可点击。presence_of_element_located(): 元素在DOM中存在(不一定可见)。

实施动态网页产品数量抓取

以下将展示如何使用Selenium和WebDriverWait从一个动态加载产品数量的页面中提取数据。

1. 导入必要的模块

首先,我们需要导入Selenium相关的模块:

from selenium import webdriverfrom selenium.webdriver.support.ui import WebDriverWaitfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support import expected_conditions as EC

2. 初始化WebDriver

选择你想要使用的浏览器,并初始化其WebDriver。这里以Chrome为例。

# 如果WebDriver在PATH中,可以直接这样初始化driver = webdriver.Chrome()# 如果WebDriver不在PATH中,需要指定路径# driver = webdriver.Chrome(executable_path='/path/to/chromedriver')

3. 访问目标URL

使用driver.get()方法访问目标网页。

url = 'https://www.digikey.com/en/products/filter/dc-dc-converters/922?s=N4IgjCBcpgnAHLKoDGUBmBDANgZwKYA0IA9lANogAMIAusQA4AuUIAykwE4CWAdgOYgAvkOIBWZCAZQwjaZDBUqIoA'driver.get(url)

4. 处理Cookie同意弹窗(重要)

许多网站在首次访问时会显示Cookie同意弹窗。如果不处理,它可能会遮挡住我们想要抓取的元素,导致抓取失败。我们需要找到并点击同意按钮。

# 假设同意按钮的XPath是 "//span[@class='button-desktop' and @track-data='ref_page_event=Consent or View Privacy']"try:    WebDriverWait(driver, 20).until(        EC.element_to_be_clickable((By.XPATH, "//span[@class='button-desktop' and @track-data='ref_page_event=Consent or View Privacy']"))    ).click()except Exception as e:    print(f"Cookie consent button not found or not clickable: {e}")    # 可以在这里选择忽略或进行其他处理

注意事项: Cookie弹窗的定位器可能会随网站更新而变化。请务必检查目标网站的HTML结构以获取正确的定位器。

5. 等待并提取产品数量

在处理完Cookie弹窗后,我们就可以等待产品数量元素加载并可见。这里提供两种健壮的定位策略:

策略一:使用data-testid属性

data-testid属性通常由前端开发者用于自动化测试,相对稳定且唯一,是定位元素的良好选择。

# 等待data-testid="static-product-count"的span元素可见product_count_element = WebDriverWait(driver, 20).until(    EC.visibility_of_element_located((By.XPATH, "//span[@data-testid='static-product-count']")))product_count_text = product_count_element.textprint(f"产品数量 (通过data-testid): {product_count_text}")

策略二:使用包含特定文本的父元素

如果目标文本是“Results”或类似字样的一部分,我们可以定位到包含该文本的父元素,然后在其内部寻找产品数量的span。

# 等待包含“Results”文本的span元素下的span子元素可见product_count_element_by_text = WebDriverWait(driver, 20).until(    EC.visibility_of_element_located((By.XPATH, "//span[contains(., 'Results')]//span")))product_count_text_by_text = product_count_element_by_text.textprint(f"产品数量 (通过包含'Results'文本): {product_count_text_by_text}")

6. 关闭WebDriver

完成数据抓取后,务必关闭浏览器实例,释放资源。

driver.quit()

完整示例代码

from selenium import webdriverfrom selenium.webdriver.support.ui import WebDriverWaitfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support import expected_conditions as ECimport time# 1. 初始化WebDriver# 确保你的ChromeDriver与Chrome浏览器版本匹配,并已放置在PATH中或指定了路径driver = webdriver.Chrome()url = 'https://www.digikey.com/en/products/filter/dc-dc-converters/922?s=N4IgjCBcpgnAHLKoDGUBmBDANgZwKYA0IA9lANogAMIAusQA4AuUIAykwE4CWAdgOYgAvkOIBWZCAZQwjaZDBUqIoA'try:    # 2. 访问目标URL    driver.get(url)    # 3. 处理Cookie同意弹窗    # 这里的XPath需要根据实际网站结构进行调整    cookie_consent_xpath = "//span[@class='button-desktop' and @track-data='ref_page_event=Consent or View Privacy']"    try:        WebDriverWait(driver, 10).until(            EC.element_to_be_clickable((By.XPATH, cookie_consent_xpath))        ).click()        print("已点击Cookie同意按钮。")        time.sleep(2) # 等待弹窗关闭和页面稳定    except Exception:        print("未找到或无需点击Cookie同意按钮。")    # 4. 等待并提取产品数量 (策略一: 使用data-testid)    print("n--- 尝试使用data-testid提取产品数量 ---")    data_testid_xpath = "//span[@data-testid='static-product-count']"    try:        product_count_element = WebDriverWait(driver, 20).until(            EC.visibility_of_element_located((By.XPATH, data_testid_xpath))        )        product_count_text = product_count_element.text.strip()        print(f"产品数量 (通过data-testid): {product_count_text}")    except Exception as e:        print(f"通过data-testid提取产品数量失败: {e}")    # 5. 等待并提取产品数量 (策略二: 使用包含'Results'文本的父元素)    print("n--- 尝试使用包含'Results'文本的父元素提取产品数量 ---")    results_xpath = "//span[contains(., 'Results')]//span"    try:        product_count_element_by_text = WebDriverWait(driver, 20).until(            EC.visibility_of_element_located((By.XPATH, results_xpath))        )        product_count_text_by_text = product_count_element_by_text.text.strip()        print(f"产品数量 (通过包含'Results'文本): {product_count_text_by_text}")    except Exception as e:        print(f"通过包含'Results'文本提取产品数量失败: {e}")except Exception as e:    print(f"发生错误: {e}")finally:    # 6. 关闭WebDriver    driver.quit()    print("nWebDriver已关闭。")

预期输出示例:

已点击Cookie同意按钮。--- 尝试使用data-testid提取产品数量 ---产品数量 (通过data-testid): 248,154--- 尝试使用包含'Results'文本的父元素提取产品数量 ---产品数量 (通过包含'Results'文本): 248,154WebDriver已关闭。

总结与注意事项

选择合适的工具: 对于静态网页,requests和BeautifulSoup是高效且轻量级的选择。对于动态加载内容的网页,Selenium是更可靠的解决方案。WebDriverWait的重要性: 在使用Selenium时,切勿直接在页面加载后立即尝试查找元素。务必结合WebDriverWait和expected_conditions,以确保目标元素已完全加载并可见,从而避免NoSuchElementException。健壮的定位器: 选择稳定且唯一的元素定位器至关重要。data-testid、id、name通常比class或文本内容更稳定。当这些不可用时,考虑使用相对XPath或CSS选择器。处理弹窗与交互: 许多网站包含Cookie同意弹窗、登录弹窗等,它们可能会阻碍数据抓取。需要编写代码来定位并与这些弹窗进行交互(如点击关闭或同意)。资源管理: 每次使用Selenium后,务必调用driver.quit()来关闭浏览器实例,释放系统资源。无头模式: 在生产环境中,为了提高效率和节省资源,可以考虑使用Selenium的无头模式(Headless Mode),即在没有图形界面的情况下运行浏览器。

from selenium.webdriver.chrome.options import Optionschrome_options = Options()chrome_options.add_argument("--headless")driver = webdriver.Chrome(options=chrome_options)

通过掌握Selenium和WebDriverWait,你将能够有效地应对绝大多数动态网页的数据抓取挑战。

以上就是使用Selenium和WebDriverWait解决动态网页产品数量抓取问题的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1584786.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 01:11:37
下一篇 2025年12月23日 01:11:48

相关推荐

  • 怎么实现css禁止点击事件

    实现css禁止点击事件的方法有使用CSS的pointer-events属性和使用JavaScript禁用点击事件。详细介绍:1、CSS的pointer-events属性可以控制元素是否可以触发鼠标事件。默认情况下,pointer-events属性的值为auto,即元素可以触发鼠标事件。要禁止点击事件…

    2025年12月24日
    000
  • css超出显示…

    css超出显示省略号的步骤:1、将文本内容超出容器的部分进行隐藏;2、确保文本能够正确地换行,以适应容器的宽度或高度;3、当文本内容超出容器的宽度或高度时,将会隐藏超出部分的内容,可以在隐藏部分的末尾添加省略;4、使用CSS的width和height属性来设置容器的宽度或高度。 在CSS中,当文本内…

    2025年12月24日
    000
  • 如何使用CSS使div标签的高度与浏览器窗口的高度相等?

    When working on web development projects, there are often scenarios where you need to give a div tag the full height of the browser window. This can b…

    2025年12月24日
    000
  • css如何实现三角形

    css实现三角形的方法:1、使用边框实现三角形,利用透明边框和实色边框的组合,可以创建不同方向和大小的三角形;2、使用伪元素实现三角形,通过使用伪元素来创建一个占据父元素一半大小的实心三角形;3、使用transform属性实现三角形,通过调整旋转角度可以创建不同角度的三角形;4、使用clip-pat…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    000
  • 13 个实用CSS技巧,助你提升前端开发效率!

    本篇文章整理分享13 个前端可能用得上的 css技巧,包括修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色等,希望对大家有所帮助! 修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景!前端开发者几乎每天都会和它们打交道,本文收集 13 个CSS技巧,…

    2025年12月24日
    000
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • “saturate”,又get了新的CSS知识!

    本篇文章给大家带来了关于css的相关知识,其中主要介绍了我因为好奇,get了一个新的css知识,什么东西让我好奇呢?感兴趣的朋友,下面一起来看一下吧,可能你也会很好奇,哈哈。 大家在查阅Element UI文档的时候,是否发现下面这个效果 好家伙,这个效果该怎么实现呢?我的思路是设置背景图为白色和透…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • 让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果

    本篇文章给大家介绍一下如何使用css实现有意思的鼠标跟随 3d 旋转效果,让交互更加生动,希望对大家有所帮助! 今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现: 简单分析一下,这个交互效果主要有两个核心: 立即学习“前端免费学习笔记(深入)”; 借助了 CSS 3D 的能力 元素的…

    2025年12月24日 好文分享
    000
  • 聊聊CSS中怎么让auto height支持过渡动画

    css如何让auto height完美支持过渡动画?下面本篇文章带大家聊聊css中让auto height支持过渡动画的方法,希望对大家有所帮助! 众所周知,高度在设置成auto关键词时是不会触发transition过渡动画的,下面是伪代码 div{ height: 0; transition: 1…

    2025年12月24日 好文分享
    000
  • CSS原生嵌套语法来了!使用指南速览!

    目前,CSS 原生嵌套语法处于开发者试用状态,CSS 工作组正在制定相关规范,Chrome 浏览器预计将于 112 版本正式推出 CSS 原生嵌套功能。 大家好,我是 CUGGZ。 最近在看 caniuse.com 时发现,Chrome 和 Edge 浏览器将在 109 版本实验性支持 CSS 原生…

    2025年12月24日
    000
  • 看看这些前端面试题,带你搞定高频知识点(一)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:给定一个元素,如何实现水平垂直居中?…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(二)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:页面导入样式时,使用 link 和 …

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(三)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:清除浮动有哪些方式? 我:呃~,浮动…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(四)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:请你谈一下自适应(适配)的方案 我:…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(五)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:css 如何实现左侧固定 300px…

    2025年12月24日 好文分享
    000
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    000
  • 聊聊怎么利用 CSS 构建花式透视背景

    本篇文章将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式,希望对大家有所帮助! 本技巧源自于一名群友的提问,如何构建如 ElementUI 文档的一种顶栏背景特效,看看效果: 仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃…

    2025年12月24日 好文分享
    000
  • 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果

    本篇文章带大家另辟蹊径,聊聊使用css滤镜构建圆角的方法,并利用圆角聊聊实现波浪效果的方法,希望对大家有所帮助! 【学习视频分享:css视频教程、web前端】 首先,我们来看这样一个图形: 立即学习“前端免费学习笔记(深入)”; 一个矩形,没什么特别的,代码如下: div { width: 200p…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信