捕捉页面的关键元素：用CSS选择器与Puppeteer自动抓取
概述
在网络数据爬取中，如何精准、有效地抓取网页中的关键元素是核心问题之一。尤其对于动态网页来说，JavaScript渲染的内容无法通过传统的静态爬虫工具（如 requests、BeautifulSoup 等）获取。因此，使用能够控制浏览器的自动化工具 Puppeteer 就成了一种理想选择。
本文将介绍如何利用 Puppeteer 结合 CSS选择器 来抓取动态网页中的关键元素。我们以抓取 亚航（AirAsia） 网站的特价机票信息为例，使用 代理IP 来绕过网站反爬虫策略，并通过设置 User-Agent 和 Cookie 等信息提高爬取效率。本文使用的代理服务为 爬虫代理。
Puppeteer 介绍
Puppeteer 是 Google 推出的用于控制无头浏览器（Headless Browser）的 Node.js 库。它可以用于：
- 自动化网页操作（如模拟点击、输入、截图等）
- 抓取动态渲染的数据
- 网站性能测试
项目环境准备
在开始之前，请确保您的开发环境已经安装了以下工具：
- Node.js
- Puppeteer
您可以通过以下命令安装 Puppeteer：
npm install puppeteer
详细实现步骤
1. 代码结构概述
我们将通过以下步骤完成对亚航特价机票信息的抓取：
- 初始化 Puppeteer 并设置代理 IP
- 访问亚航官网，并设置 User-Agent 和 Cookie
- 使用 CSS 选择器定位特价机票信息
- 抓取并输出特价机票价格和航班信息
2. 完整代码实现
const puppeteer = require('puppeteer');
// 配置代理IP信息 亿牛云爬虫代理加强版 www.16yun.cn
const proxyHost = "proxy.16yun.cn"; // 代理服务器
const proxyPort = 12345; // 代理端口
const proxyUsername = "your_username"; // 用户名
const proxyPassword = "your_password"; // 密码
// 自定义User-Agent
const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36';
// 设置目标网站
const targetUrl = 'https://www.airasia.com/';
(async () => {
// 启动 Puppeteer 浏览器
const browser = await puppeteer.launch({
headless: true, // 设置为 true 表示无头模式
args: [
`--proxy-server=${proxyHost}:${proxyPort}` // 配置16yun代理服务器
]
});
// 创建新页面
const page = await browser.newPage();
// 配置16yun代理的认证信息
await page.authenticate({
username: proxyUsername,
password: proxyPassword
});
// 设置 User-Agent
await page.setUserAgent(userAgent);
// 设置 Cookie（这里假设已有登录 Cookie，可以通过抓包获取）
const cookies = [
{
name: 'sessionid',
value: 'your_session_value',
domain: '.airasia.com'
}
];
await page.setCookie(...cookies);
// 访问目标网站
await page.goto(targetUrl, {
waitUntil: 'networkidle2', // 等待网络空闲
timeout: 60000 // 设置超时时间
});
// 等待特价机票列表元素加载完成
await page.waitForSelector('.promotion-list', { timeout: 60000 });
// 使用CSS选择器获取特价机票信息
const flightData = await page.evaluate(() => {
// 查找特价机票列表元素
const promotions = document.querySelectorAll('.promotion-list .promotion-item');
// 提取特价机票信息
const data = [];
promotions.forEach(item => {
const flightRoute = item.querySelector('.route-info')?.innerText || '未知航线';
const price = item.querySelector('.price')?.innerText || '未知价格';
const flightDate = item.querySelector('.date-info')?.innerText || '未知日期';
data.push({
flightRoute,
price,
flightDate
});
});
return data;
});
// 输出抓取的数据
console.log('特价机票信息:');
flightData.forEach((flight, index) => {
console.log(`航班 ${index + 1}:`);
console.log(` 航线: ${flight.flightRoute}`);
console.log(` 价格: ${flight.price}`);
console.log(` 日期: ${flight.flightDate}`);
});
// 关闭浏览器
await browser.close();
})();
3. 代码详解
- 代理配置：
使用爬虫代理的用户名、密码，进行身份认证。
await page.authenticate({
username: proxyUsername,
password: proxyPassword
});
- User-Agent 和 Cookie 设置：
配置 User-Agent 以模仿真实用户的浏览器访问，并设置 Cookie 以提高成功率。
await page.setUserAgent(userAgent);
await page.setCookie(...cookies);
- 抓取特价机票信息：
使用 CSS 选择器精准获取页面中的特价机票列表，并提取航线、价格、日期等关键信息。
const promotions = document.querySelectorAll('.promotion-list .promotion-item');
4. 结果输出
程序执行完成后，将会输出类似以下格式的特价机票信息：
特价机票信息:
航班 1:
航线: 北京 - 曼谷
价格: ¥599
日期: 2024-12-15
航班 2:
航线: 上海 - 吉隆坡
价格: ¥499
日期: 2024-12-16
提高效率的优化点
- 使用代理 IP：
为避免 IP 被限制，我们使用了的爬虫代理服务，并动态切换 IP。 - 设置 User-Agent 和 Cookie：
模拟真实用户的访问行为，提高爬取成功率。 - 优化选择器和等待时间：
使用waitForSelector保证在元素加载完成后再进行抓取，避免因为页面加载问题导致数据缺失。
结论
本文通过 Puppeteer 和 CSS选择器 实现了对 亚航 网站特价机票信息的抓取。利用代理 IP 和自定义请求头等手段，提高了爬虫的隐蔽性和稳定性。在实际应用中，Puppeteer 的强大功能不仅限于此，它还可以帮助开发者完成更多复杂的网页自动化操作，是网络爬虫开发的有力工具。