捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取

本文涉及的产品
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
实时计算 Flink 版,5000CU*H 3个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: 本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。

爬虫代理

概述

在网络数据爬取中,如何精准、有效地抓取网页中的关键元素是核心问题之一。尤其对于动态网页来说,JavaScript渲染的内容无法通过传统的静态爬虫工具(如 requestsBeautifulSoup 等)获取。因此,使用能够控制浏览器的自动化工具 Puppeteer 就成了一种理想选择。

本文将介绍如何利用 Puppeteer 结合 CSS选择器 来抓取动态网页中的关键元素。我们以抓取 亚航(AirAsia) 网站的特价机票信息为例,使用 代理IP 来绕过网站反爬虫策略,并通过设置 User-AgentCookie 等信息提高爬取效率。本文使用的代理服务为 爬虫代理

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

提高效率的优化点

  1. 使用代理 IP
    为避免 IP 被限制,我们使用了的爬虫代理服务,并动态切换 IP。
  2. 设置 User-Agent 和 Cookie
    模拟真实用户的访问行为,提高爬取成功率。
  3. 优化选择器和等待时间
    使用 waitForSelector 保证在元素加载完成后再进行抓取,避免因为页面加载问题导致数据缺失。

结论

本文通过 PuppeteerCSS选择器 实现了对 亚航 网站特价机票信息的抓取。利用代理 IP 和自定义请求头等手段,提高了爬虫的隐蔽性和稳定性。在实际应用中,Puppeteer 的强大功能不仅限于此,它还可以帮助开发者完成更多复杂的网页自动化操作,是网络爬虫开发的有力工具。

相关文章
|
22天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
50 7
|
22天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
46 7
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
23天前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
20 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
1月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
164 3
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
71 2
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
28 0
|
2月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
183 0
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
38 0

热门文章

最新文章