一、案例背景与采集目标
前面二十多个案例,我们采的大多是「一打开网页就能看到全部内容」的静态页。可真实世界里的页面越来越不爱这么干了:内容要等你往下滚才出现,要等你点一下「加载更多」才补上,甚至要你登录之后才给你看。这类页面叫动态网页。
这一篇的示范对象是携程旅游攻略,网址 https://you.ctrip.com/sight/guangzhou152.html ,它是一个公开、无需登录、滚动到底部会继续加载的图文列表页,非常适合课堂复现。另一个目标对象是小红书探索页,https://www.xiaohongshu.com/explore ,它是典型的强登录墙动态页,我们只讲它的原理与合规边界,不绕过登录。这一篇是全课的技术难点,但请放心——你依然不写代码,要学的是怎么判断页面是不是动态的、怎么让 WorkBuddy 驱动浏览器去操作页面再取内容、怎么处理等待、重试、条数上限与失败留证。
1.1 这个案例要拿到什么
- 识别出一个页面属于哪种动态类型:滚动加载 / 点击加载更多 / 需要登录;
- 让 WorkBuddy 驱动浏览器,把「滚动到底部」触发出来的条目全部取回;
- 处理等待与重试:内容没出来时先等,最多重试几次;
- 设定条数上限与终止条件,避免无限滚动把对话拖死;
- 采集失败时留下页面截图作为证据,方便排查。
1.2 为什么动态页面这么难
原因用一句话就能说清:你右键查看的「网页源代码」里,根本没有你要的内容。携程攻略页、小红书探索页都是这样——你在屏幕上明明看到了标题和图片,按 Ctrl/Cmd + F 去搜源代码却搜不到,因为它们是浏览器运行 JavaScript 之后才填进去的。
| 页面类型 | 你看到的 | 源代码里有的 | 对策 |
|---|---|---|---|
| 滚动加载(携程攻略) | 越往下滚越多 | 只有首屏几条 | 驱动浏览器反复滚动,直到不再新增 |
| 点击加载更多 | 点一下多一页 | 只有第一页 | 让浏览器自动点击按钮,直到按钮消失 |
| 需要登录(小红书探索) | 登录后才显示 | 登录框 | 本课不越界;只做公开页,登录内容另行授权 |
| 纯前端渲染 | 内容正常显示 | 一堆脚本,没有数据 | 等页面渲染完成后再取文本 |
目标站点与交付产物
下表是本篇用到的真实站点。绿色是课堂可稳定复现的示范站点;橙色是延伸站点,多数有登录墙或风控,课堂上只讲结构、原理与合规边界,不教绕过。
| 项目 | 内容 |
|---|---|
| 示范站点 | 携程 · 旅游攻略 https://you.ctrip.com/sight/guangzhou152.html 全课技术难点:内容由 JavaScript 渲染、滚动到底部继续加载;公开、无需登录,课堂可复现 |
| 延伸站点 |
|
| 交付产物 |
|
| 难度 | ★★★ 高 |
| 合规提示 | 小红书、抖音等平台有明确的反自动化条款与登录墙,教学只讲原理与「如何判断页面是动态的」,不提供任何绕过登录或验证码的方法;演示请使用允许采集的页面或自建测试页。 |
二、数据源与字段设计
示范站点选携程旅游攻略,https://you.ctrip.com/sight/guangzhou152.html ,公开、无需登录、滚动加载;目标站点选小红书探索页,https://www.xiaohongshu.com/explore ,强登录墙,只讲原理与合规边界。这类页面在资讯聚合、攻略、公开榜单站里很常见。
2.1 目标站点信息
| 站点全称 | 网址 | 页面形态与接口 | 规模与角色 |
|---|---|---|---|
| 携程 · 旅游攻略 | https://you.ctrip.com/sight/guangzhou152.html | 图文瀑布流列表,滚动到底部继续加载;无需登录,内容由 JavaScript 渲染 | 示范站点:公开可复现的滚动加载示范页 |
| 小红书 · 探索页 | https://www.xiaohongshu.com/explore | 瀑布流卡片,滚动加载 + 强登录墙;源码里搜不到内容标题 | 对照站点:强登录墙,只讲原理与边界,不绕过登录、不做演示 |
| 抖音 | https://www.douyin.com/ | 无限滚动 + 强风控 | 对照站点:仅作合规讨论 |
| B 站 · 全站排行 | https://www.bilibili.com/v/popular/rank/all | 榜单页,滚动加载 + 有公开接口 | 对照站点:可作「动态页 vs 公开接口」的对比 |
2.2 完整字段表(12 个字段)
| 字段名 | 字段含义 | 示例值 | 口径与备注 |
|---|---|---|---|
序号 | 条目顺序 | 1 | 采集时自动生成 |
内容标题 | 条目标题 | 广州三天两夜亲子游路线全攻略 | 取渲染后的可见文本 |
正文摘要 | 条目描述(截断) | 第一天:长隆野生动物世界,建议早上八点入园…… | 只取前 80 字,没有就留空 |
作者昵称 | 发布者昵称 | 爱旅行的豆妈 | 仅取公开昵称,不做身份关联 |
点赞数 | 点赞数量 | 12800 | 「1.2 万」要换算成整数 |
收藏数 | 收藏数量 | 6420 | 「6420」保留整数 |
评论数 | 评论数量 | 318 | 纯数字,没有就留空 |
发布时间 | 发布或更新时间 | 2026-07-18 | 相对时间(「3 天前」)要换算或注明 |
话题标签 | 内容标签 | 亲子游;广州 | 多个用分号分隔 |
详情链接 | 条目详情地址 | https://you.ctrip.com/travels/guangzhou/10000000.html | 完整可点开;此处为示意地址,真实 id 随条目不同,采集时按实际网址照录 |
加载批次 | 第几次滚动/点击后出现 | 第 3 批 | 用于判断有没有采全 |
失败截图 | 留证截图文件名 | shot_01.png | 失败时用于排查 |
2.3 三条操作口径要点
- 先设定「停下来」的条件。滚动加载页面理论上可以无限往下,必须提前说清楚:采到 50 条就停,或者连续滚动 3 次都没有新条目就停。没有终止条件,任务可能永远结束不了。
- 等待要「显式」。页面渲染需要时间。要明确告诉助手:每滚动一次,等 1 到 2 秒,等内容稳定后再抓取。很多「采到一半是空的」问题,根子都在没等够。
- 失败要留证。当某次操作没拿到内容时,让助手把当前页面截图保存下来。有了截图,你能一眼看清是页面变了、还是被限速了、还是根本没滚动到底。
AI 助手小贴士|滚动加载最怕「以为采完了」。让助手在停止时报告「最后一次滚动新增了几条」,如果新增是 0 且已经滚过 3 次,才能确认真的到底了。
打开 WorkBuddy 或任意 AI 对话工具,试试这样问:请告诉我最后一次滚动新增了多少条;如果连续三次滚动新增都是 0,再停止并给我完整结果。
课程思政|工匠精神与严谨求实 · 会停下来,才是真会采
无限滚动的页面在技术上可以一直滚下去。真正专业的做法是先约定终止条件:多少条、几次无新增、什么时间上限。写程序如此,做研究也如此——知道什么时候收集够了、什么时候该收手,比一味追求「尽可能多」更需要判断力。
三、零代码操作步骤
工具与技能|先看清三个角色,再动手
本篇全程零代码:你把要求说清楚,AI 去执行,你负责验收。三个角色分工如下——浏览器技能指的是腾讯开源的 BrowserSkill,它能让 AI 直接操作你电脑上真实的浏览器(可复用已经登录的状态),自己开一个独立窗口干活,不打扰你正在看的网页;遇到验证码、登录或确认弹窗,它会停下来交给你本人处理。
| 角色 | 负责什么 | 在本案例里具体做什么 |
|---|---|---|
| 你 | 确认字段清单、验收结果、清洗与合规把关 | 盯字段清单、核对结果、处理异常(如验证码) |
| WorkBuddy | 接中文指令:探字段 → 批量采 → 清洗 → 导出交付物 | 拆解本篇的采集任务并跑完全量、产出交付物 |
| 浏览器技能 BrowserSkill | 以真实浏览器打开页面:跑脚本渲染、滚动 / 翻页 / 点开详情、截图留证;可复用本机浏览器已登录状态,遇到验证码或登录弹窗会停下来交给你处理 | 先判断页面是不是动态的,再驱动浏览器滚动 / 点击把内容取全 |
五步操作主线(全课程统一,每一篇都按这个顺序推进):
- 定目标与字段:先看本篇第二节的字段表,把「要哪几列、每列什么口径、要多少条」说清楚——字段清单就是验收标准,说不清就会拿回一张字段乱七八糟的表。
- 现场踩点(浏览器技能 BrowserSkill):打开
https://you.ctrip.com/sight/guangzhou152.html,记住一个你看到的标题词 → 右键「查看页面源代码」→ 搜这个词:搜不到就是动态页,需要驱动浏览器。 - 小样试采(WorkBuddy):让它用浏览器技能滚动一次,看新增了多少条,确认判断对不对。
- 核对与清洗:① 有没有「滚到不再新增就停」;② 失败重试与截图留证做了没有;③ 条数上限设了没有(别无限滚下去)。
- 导出与归档:导出交付物(数据明细表 / 可筛选明细页 / 数据看板 / 可复用的技能包),文件名带上采集日期,并写清数据来源、采集时间与已知局限。
用浏览器技能 BrowserSkill 打开 https://you.ctrip.com/sight/guangzhou152.html(携程 · 旅游攻略),把这一页每条记录能采到的字段名和示例值列出来,先不要采集。本案例的操作分两段:先判断页面类型,再让 WorkBuddy 驱动浏览器。请按顺序来。
3.1 第一步:判断页面是不是动态的
- 在浏览器里打开携程旅游攻略
https://you.ctrip.com/sight/guangzhou152.html,随便记住一个你看到的标题词。 - 右键 → 查看页面源代码(注意不是「检查元素」)。
- 在源代码页面按 Ctrl/Cmd + F,搜索刚才记住的那个词。
- 搜不到:这是动态页面,内容由脚本渲染,需要驱动浏览器。
- 搜得到:这是静态页面,直接按前面案例的方式采,不需要本案例的复杂操作。
3.2 第二步:驱动浏览器采全内容
- 把判断结果告诉 WorkBuddy:「这个页面是滚动加载的动态页,代码里没有内容,请用浏览器打开它,滚动到底部加载更多,再采集」。
- 约定滚动规则:「每次滚动后等 2 秒;连续 3 次没有新增条目就停止;最多采 50 条」。
- 先小步验证:让它先滚动 3 次,把已加载的条目报给你,看内容是不是你要的。
- 确认真到底:看它报告的最末一次新增条数;若停止时新增不为 0,说明还没到底,让它继续。
- 要求失败留证:「如果某一步没采到内容,请截一张当前页面的图保存下来,并告诉我卡在哪一步」。
- 导出结果:导出为
dynamic_20261008.xlsx,把加载批次列保留,方便你判断覆盖范围。
这个页面是点击「加载更多」按钮才出内容。请反复点击该按钮,直到按钮消失或不可点击,再把全部条目给我。四、提示词模板与追问技巧
动态页面的提示词,关键是把页面类型、触发动作、等待时长、终止条件、失败留证五件事写全。下面针对携程旅游攻略这种「滚动到底部加载更多」的页面给出一份完整模板。
请帮我完成一个动态网页的采集任务。
【目标站点】携程 · 旅游攻略,网址 https://you.ctrip.com/
【页面类型】内容是滚动到底部后才加载的(我已经右键看过源代码,里面搜不到标题)
【采集方式】请用浏览器打开这个页面,反复滚动到底部,触发加载更多,再采集内容
【需要字段】
1. 序号(从 1 开始)
2. 内容标题
3. 正文摘要(只取前 80 字,没有就留空)
4. 作者昵称
5. 点赞数(「1.2 万」这类要换算成整数)
6. 收藏数
7. 评论数
8. 发布时间
9. 话题标签(多个用分号分隔)
10. 详情链接(完整网址)
11. 加载批次(这是第几次滚动后出现的)
【滚动与等待规则】
1. 每次滚动到页面底部后,请等待 2 秒,等新内容渲染出来
2. 连续 3 次滚动都没有新增条目时停止
3. 最多采集 50 条,达到就停止
【失败处理】
1. 如果某一步没采到内容,请保存一张当前页面截图(命名为 shot_01.png 递增)
2. 并告诉我卡在第几次滚动、当前页面显示什么
【输出】
1. 先在对话里给我表格预览和「共滚动几次、最后一批新增几条」
2. 我确认后导出为 dynamic_20261008.xlsx
4.1 三条常用追问指令
追问一(还没到底):
你停止时最后一批还新增了 4 条,说明还没到底。
请继续滚动 5 次,直到连续三次新增为 0 再停下。
追问二(改成点击型):
这个页面不是滚动加载,而是要点击「加载更多」按钮。
请改为反复点击该按钮,直到按钮消失或变灰,
再把全部条目给我,并报告一共点了几次。
追问三(结果不全):
第 20 条之后的标题都是空的,请检查是不是等的时间不够。
请把等待时间加到 3 秒重试一次,并把这次和上次的条数对比给我。
4.2 怎么验收一份动态页面的采集结果
动态页面没有「一眼能数清」的总数,所以验收要靠三条间接证据。
| 验收项 | 怎么看 | 为什么能信 |
|---|---|---|
| 最后一批新增为 0 | 停止时助手报告的「最后一批新增条数」是 0 | 说明滚下去已经没有新内容了 |
| 连续无新增达 3 次 | 报告显示连续三次滚动都没有新条目 | 单次为 0 可能只是网络慢,连续三次才稳 |
| 条数达到上限或到底 | 条数等于 50,或报告显示已到底 | 两种终止条件至少满足一种,任务才完整 |
| 截图无异常 | 失败截图里页面正常、没有验证码 | 说明不是被限速或拦截导致的漏采 |
AI 助手小贴士|动态页面的采集时间明显更长,容易被误以为「卡住了」。让助手每一步都回报进度,你就不必干等。
打开 WorkBuddy 或任意 AI 对话工具,试试这样问:请每滚动 5 次就向我报告一次当前已采集的条数,不要等到全部结束才说话。
五、结果核对、清洗与保存
下面是 WorkBuddy 从携程旅游攻略页返回的结果样例(节选,数据为示例):
| 序号 | 内容标题 | 作者昵称 | 点赞数 | 收藏数 | 发布时间 | 加载批次 |
|---|---|---|---|---|---|---|
| 1 | 广州三天两夜亲子游路线全攻略 | 爱旅行的豆妈 | 12800 | 6420 | 2026-07-18 | 第 1 批 |
| 2 | 长隆野生动物世界一日游避坑指南 | 南国小陈 | 8650 | 3910 | 2026-06-30 | 第 1 批 |
| 3 | 广州老城区美食地图(附人均消费) | 吃货阿May | 15300 | 9120 | 2026-05-12 | 第 2 批 |
| 4 | 珠江夜游最佳观赏点整理 | 羊城摄影师 | 4980 | 1760 | 2026-04-25 | 第 3 批 |
5.1 四步核对与清洗
① 批次体检:
请按「加载批次」分组统计条数,
如果中间某一批突然变少,单独标出来让我检查。
② 去重:
请按「详情链接」去重,重复的只保留第一次出现的条目。
③ 数字列规范化:
请把「点赞数」「收藏数」「评论数」里的「万」换算成整数,
例如「1.2 万」换算成 12000,只保留数字。
④ 补采集信息:
请新增两列:「来源页面」和「采集时间」(精确到分钟),
因为动态页面的内容随时会变,时间戳格外重要。
5.2 保存与归档
动态页面的采集结果,最好连同截图与日志一起归档。因为页面内容会变,日后别人质疑「你当时采的时候是这样的吗」,你有证据。
dynamic_20261008.xlsx ← 结果主表
dynamic_20261008_log.txt ← 日志:滚动次数、每批条数、终止原因、耗时
dynamic_20261008_shots/ ← 过程截图
shot_01.png、shot_02.png …
AI 助手小贴士|把「每批条数」存进日志,是排查动态页面缺口的钥匙。某批突然为 0,通常意味着页面卡住了,需要重试那一段。
打开 WorkBuddy 或任意 AI 对话工具,试试这样问:请把每一批滚动的条数写进日志文件,格式是「第 N 批:X 条」,并在末尾写清终止原因。
课程思政|工匠精神与严谨求实 · 留痕,是对结果负责
动态页面最麻烦的地方在于它「随时会变」,你今天采的结果,明天可能就对不上。所以专业的做法是:把截图、日志、时间戳一起留下。这不是多此一举,而是让你日后能说清楚「我的数据是怎么来的」。会给结果留痕的人,做的数据才经得起追问。
六、常见问题与合规红线
6.1 六个高频问题
| 现象 | 原因 | 怎么处理 |
|---|---|---|
| 采到的内容只有首屏几条 | 页面是滚动加载,没触发后续渲染 | 让助手滚动到底部,并约定连续无新增才停 |
| 源代码里搜不到标题 | 内容由 JavaScript 渲染,静态 HTML 里没有 | 改由浏览器驱动采集,等渲染完成再取 |
| 一边采一边漏,条数对不上 | 没等页面渲染完就抓 | 每步显式等待 1~3 秒,等稳定后再取 |
| 点「加载更多」后按钮消失,采不到 | 按钮文案或位置变了 | 让助手按「直到按钮消失/禁用」作为终止条件 |
| 要登录才显示全部内容(如小红书探索页) | 登录墙 | 本课不越界;换公开页面,或说明已获授权 |
| 被提示访问过于频繁 | 滚动与点击节奏过快 | 立即放慢或停止,加大等待时间,不要硬闯 |
6.2 三条合规红线
- 不绕过登录与验证。需要登录、需要验证码才能看的内容,本课一律不采;不要在提示词里要求助手「模拟登录」「破解验证码」。小红书探索页就是典型例子,只讲原理,不去绕登录。
- 控制操作节奏。滚动与点击都要留出等待,既是为了采全,也是为了不给对方服务器造成压力。
- 动态内容同样有边界。视频、音乐、付费专栏这类需要授权的内容,即使技术上能取到,也不在本课的采集范围内。
课程思政|数据安全与法治素养 · 能力强了,边界更要清楚
会驱动浏览器之后,你能采的页面一下子多了很多,这也意味着越界的诱惑变大了。请始终记住:能采到不等于该采。登录内容不碰、验证码不绕、付费内容不取——这三条守住了,你手里的技术才是生产力,而不是风险。
七、随堂自测(10 题)
点击选项即可判分,答错的题会立刻显示解析。
1判断一个页面是不是动态页面,最直接的办法是?
- A. 右键查看页面源代码,搜索一个你看到的标题词,搜不到就是动态页
- B. 看页面配色
- C. 看网址长度
- D. 刷新几次页面
2采一个无限滚动的页面时,下面哪一条是必须提前约定的?
- A. 页面的字体大小
- B. 滚动用鼠标还是键盘
- C. 服务器的品牌
- D. 终止条件(条数上限或连续无新增次数)
3动态采集时「每步等待 1~3 秒」的主要作用是?
- A. 等页面把新内容渲染完成,避免抓到空值
- B. 让助手休息
- C. 避免被对方发现
- D. 节省时间
4采到一半发现某批条目为空,最合理的处理是?
- A. 忽略这批继续
- B. 把整个结果删掉重采
- C. 只补采这一批,再与原结果按链接合并去重
- D. 手动补上几条
5要求助手在采集失败时保存页面截图,最主要的目的是?
- A. 让结果更美观
- B. 留证,方便判断是页面变了还是被限速
- C. 增加文件数量
- D. 给老师看你有截图
6小红书探索页提示「登录后查看全部」,本课的正确做法是?
- A. 让助手模拟登录
- B. 想别的办法绕过登录
- C. 换公开页面(如携程旅游攻略),或确认已获授权后再采
- D. 反复刷新直到出现内容
7「滚动加载」与「点击加载更多」两种页面,提示词上最大的区别是?
- A. 没有任何区别
- B. 点击型要写明「反复点击按钮,直到按钮消失或禁用」
- C. 点击型不需要等待
- D. 滚动型不需要终止条件
8验收一份动态页面采集结果时,下面哪个证据最不能说明「采全了」?
- A. 最后一批新增条数为 0
- B. 连续三次滚动无新增
- C. 条数达到了约定的上限
- D. 助手说「应该差不多了」
9某动态页面同时提供公开的数据接口和滚动列表,应该优先用哪个?
- A. 滚动列表,因为看得见
- B. 都行,随便选
- C. 优先用公开接口,更快更稳也更省资源
- D. 两个都采一遍对比
10动态等内容较多时,让助手「每滚动若干次回报一次进度」的好处是?
- A. 好看
- B. 你能及时判断是否卡住或偏题,不必干等
- C. 可以减少采集条数
- D. 能让页面加载更快