一、选型背景：传统爬虫已无力应对的视觉挑战
在现代互联网环境中，尤其是小红书、抖音、B站等视觉驱动型平台，传统基于 HTML 的爬虫已经难以满足精准数据采集需求：
- 内容加载由 JS 动态触发，难以直接解析 HTML；
- 视频、图片等关键元素无法通过 DOM 提取；
- 页面元素位置随屏幕尺寸、渲染行为而变化。
为此，「视觉爬虫」应运而生。通过浏览器自动化 + 截图 + 图像识别，可以突破传统爬虫的局限，抓取“人眼所见”的页面内容。
本文聚焦在 Puppeteer 驱动浏览器自动化，并结合计算机视觉实现页面元素的动态定位与信息提取。
二、技术对比维度：DOM vs. 视觉爬虫
| 对比维度 | 传统 DOM 爬虫 | 视觉爬虫（Puppeteer + CV） |
|---|---|---|
| 页面解析方式 | HTML 文档结构 | 可视化渲染页面截图 |
| 定位元素依据 | CSS/XPath/Selector | 图像特征（坐标、形状、文字） |
| 动态内容支持 | 差，依赖额外执行 JS | 强，浏览器真实执行环境 |
| 稳定性 | 页面结构变动易失效 | 图像特征变化小，较稳 |
| 技术难度 | 低 | 中高，涉及计算机视觉处理 |
三、代码对比示例：关键词搜索＋视频截图＋视觉定位
下面通过 Puppeteer + Node.js 实现小红书视频搜索 + 播放 + 屏幕截图 + 图像识别定位关键区域，并设置代理等提供采集成功率。
💡 目标任务：搜索关键词“旅行vlog”，点击第一个视频并截图视频播放页，对播放按钮等进行视觉定位。
项目依赖
npm install puppeteer-extra puppeteer-extra-plugin-stealth tesseract.js sharp
核心代码示例
const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
const tesseract = require('tesseract.js'); // 用于图像识别
const sharp = require('sharp'); // 图像裁剪处理
puppeteer.use(StealthPlugin());
(async () => {
// 爬虫代理配置（亿牛云示例 www.16yun.cn）
const proxyHost = 'proxy.16yun.cn';
const proxyPort = '31000';
const proxyUser = '16YUN';
const proxyPass = '16IP';
// Puppeteer 启动带代理
const browser = await puppeteer.launch({
headless: false,
args: [
`--proxy-server=http://${
proxyHost}:${
proxyPort}`,
],
});
const page = await browser.newPage();
// 设置 User-Agent 和 Cookie（模拟真实用户）
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');
await page.setCookie({
name: 'xhsTracker',
value: 'your_cookie_value',
domain: '.xiaohongshu.com'
});
// 设置代理认证
await page.authenticate({
username: proxyUser,
password: proxyPass,
});
// 打开小红书搜索页面
const keyword = '旅行vlog';
await page.goto(`https://www.xiaohongshu.com/search_result?keyword=${
encodeURIComponent(keyword)}`, {
waitUntil: 'networkidle2'
});
await page.waitForTimeout(3000); // 等待页面加载
// 点击第一个视频内容
const videoSelector = 'div.video-feed-container div.feed-video-card:first-child';
await page.waitForSelector(videoSelector);
await page.click(videoSelector);
// 等待视频播放页加载
await page.waitForTimeout(5000);
// 截图当前页面
const screenshotPath = 'screenshot.png';
await page.screenshot({
path: screenshotPath, fullPage: true });
console.log('页面截图已保存:', screenshotPath);
// 对截图进行图像识别（找出“暂停/播放按钮”等图标）
const croppedPath = 'video_button_crop.png';
// 示例：裁剪中间区域（大概率是播放按钮）
await sharp(screenshotPath)
.extract({
left: 500, top: 300, width: 300, height: 200 }) // 可按实际屏幕调整
.toFile(croppedPath);
console.log('已裁剪截图区域:', croppedPath);
// 使用 Tesseract 识别该区域的文本（可替换为模板匹配找图标）
const result = await tesseract.recognize(croppedPath, 'eng', {
logger: m => console.log(m)
});
console.log('识别结果：', result.data.text);
await browser.close();
})();
四、场景推荐
| 适用场景 | 推荐方式 |
|---|---|
| 采集结构化信息（如商品价格） | 传统 DOM 爬虫足够 |
| 视频截图、播放状态分析 | Puppeteer + CV 更适合 |
| 页面强 JS 渲染（如小红书） | Puppeteer 更有优势 |
| 动态内容 + 图像定位 | Puppeteer + 图像识别最强 |
五、结论：让“爬虫看见”比“爬虫看懂”更重要
随着视觉化内容成为主流，“看见”页面比“理解 HTML”更关键。Puppeteer 结合计算机视觉不仅可以真实再现页面内容，还能识别图像中的元素，为复杂场景提供强有力的支持。
尤其在小红书等平台，传统 DOM 爬虫几乎“寸步难行”，而视觉爬虫打开了新一代内容采集的大门。未来，结合 OCR、模板匹配、视频分析的视觉爬虫，将成为数据采集的新范式。
