
Emma Foster
Machine Learning Engineer

网页抓取已成为自动化数据收集和监控网站变化的必备工具。在这篇博文中,我们将探索如何使用 Puppeteer,一个 Node.js 库,来进行网页抓取、检测网站变化以及截取这些变化的屏幕截图。
Puppeteer 是一个 Node.js 库,它提供了一个高级 API 来通过 DevTools 协议控制无头 Chrome 或 Chromium。它可以用于网页抓取、自动化测试,甚至生成网页的屏幕截图和 PDF。
在开始之前,请确保您已安装以下内容:
您可以在终端中运行以下命令来安装 Puppeteer:
npm install puppeteer
首先,让我们创建一个基本的网页抓取程序,它会导航到网站并提取文本内容。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 导航到网站
await page.goto('https://example.com');
// 提取文本内容
const content = await page.evaluate(() => {
return document.querySelector('h1').innerText;
});
console.log('页面内容:', content);
await browser.close();
})();
此脚本会打开一个无头浏览器,导航到 example.com,并从 <h1> 元素中提取文本。您可以将 URL 替换为您要抓取的网站,并将选择器调整为与您感兴趣的元素相匹配。
Puppeteer 允许您轻松地截取网页的屏幕截图。您可以捕获全页屏幕截图或页面的特定区域。
以下是如何截取全页屏幕截图:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 导航到网站
await page.goto('https://example.com');
// 截取全页屏幕截图
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();
})();
此脚本会将整个页面的屏幕截图保存为 screenshot.png。您可以修改 path 以指定不同的文件名或位置。
监控网站的变化是网页抓取中的一项有用功能。您可以通过反复检查网站的内容并将它与之前保存的版本进行比较来实现这一点。
以下是如何检测文本变化并在内容发生变化时截取屏幕截图的示例:
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 导航到网站
await page.goto('https://example.com');
// 提取文本内容
const currentContent = await page.evaluate(() => {
return document.querySelector('h1').innerText;
});
const previousContentPath = 'previous-content.txt';
let previousContent = '';
// 检查之前的内容是否存在
if (fs.existsSync(previousContentPath)) {
previousContent = fs.readFileSync(previousContentPath, 'utf8');
}
// 将当前内容与之前的内容进行比较
if (currentContent !== previousContent) {
console.log('内容已更改!');
// 保存新内容
fs.writeFileSync(previousContentPath, currentContent);
// 截取更改的屏幕截图
await page.screenshot({ path: `screenshot-${Date.now()}.png`, fullPage: true });
console.log('屏幕截图已保存!');
} else {
console.log('未检测到更改。');
}
await browser.close();
})();
在这个例子中:
<h1> 元素的内容。previous-content.txt) 进行比较。previous-content.txt 中以供将来比较。您可以使用 Node.js 来安排此脚本使用 node-cron 包按间隔运行。
首先,安装 node-cron:
npm install node-cron
现在,修改您的脚本以便按设定的间隔(例如,每 5 分钟)运行:
const puppeteer = require('puppeteer');
const fs = require('fs');
const cron = require('node-cron');
cron.schedule('*/5 * * * *', async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const currentContent = await page.evaluate(() => {
return document.querySelector('h1').innerText;
});
const previousContentPath = 'previous-content.txt';
let previousContent = '';
if (fs.existsSync(previousContentPath)) {
previousContent = fs.readFileSync(previousContentPath, 'utf8');
}
if (currentContent !== previousContent) {
console.log('内容已更改!');
fs.writeFileSync(previousContentPath, currentContent);
await page.screenshot({ path: `screenshot-${Date.now()}.png`, fullPage: true });
console.log('屏幕截图已保存!');
} else {
console.log('未检测到更改。');
}
await browser.close();
});
此脚本将每 5 分钟 (*/5 * * * *) 运行一次,并检查网站是否存在更改。如果检测到更改,它将截取屏幕截图并记录更新。
在 CapSolver 获取顶级验证码解决方案的奖励代码:scrape。兑换后,您每次充值后都会获得额外 5% 的奖励,无限次。

Puppeteer 是一个用于网页抓取和自动化浏览器任务的强大工具。在这篇文章中,我们演示了如何使用 Puppeteer 进行基本的网页抓取、检测网站变化以及捕获这些变化的屏幕截图。使用这些技术,您可以自动监控网站并跟踪更新。请务必检查网站抓取政策,避免违反服务条款。
一份完整的指南,介绍支持Agentic Browsers的CAPTCHA求解基础设施。了解为什么CAPTCHAs是AI代理的主要障碍,以及CapSolver如何提供关键解决方案,实现无缝的网络自动化
