一、选型背景：传统爬虫已无力应对的视觉挑战
在现代互联网环境中，尤其是小红书、抖音、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、模板匹配、视频分析的视觉爬虫，将成为数据采集的新范式。
