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

简介: 本文介绍了如何使用 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 的强大功能不仅限于此,它还可以帮助开发者完成更多复杂的网页自动化操作,是网络爬虫开发的有力工具。

相关文章
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
560 2
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
502 2
|
5月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
177 1
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
388 0
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
183 0
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
564 79
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
724 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
505 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
367 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布