Puppeteer教程:使用CSS选择器点击和爬取动态数据

本文涉及的产品
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
实时计算 Flink 版,5000CU*H 3个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: 本文介绍如何使用Puppeteer结合CSS选择器爬取动态网页数据,以贝壳网的二手房价格为例,通过代理IP提高爬虫成功率。文章详细讲解了Puppeteer的安装和配置、代码实现及数据趋势分析,帮助读者掌握动态网页爬取技术。

爬虫代理

1. 前言

在现代的网页中,许多数据是通过JavaScript动态加载的,这使得传统的爬虫工具(如requestsBeautifulSoup)无法获取到这些数据。因此,为了更好地处理动态网站的数据爬取,我们需要使用像Puppeteer这样的浏览器自动化工具。

本文将介绍如何使用Puppeteer结合CSS选择器,实现对动态网页的交互操作,并爬取贝壳网的二手房价格数据。为了提高爬虫的成功率,我们还将结合爬虫代理,通过代理IP提高采集效率。

2. Puppeteer简介

2.1 什么是Puppeteer?

Puppeteer 是一个由 Google 官方推出的 Node.js 库,用于控制 Chromium 或 Chrome 浏览器。它支持各种浏览器自动化任务,例如截屏、生成PDF、页面爬取和测试自动化。

2.2 Puppeteer的优势

  • 渲染JavaScript:可以抓取动态加载的数据。
  • 模拟用户操作:可以点击、输入、滚动等操作,适合处理需要用户交互的页面。
  • 支持无头浏览器:可以以无界面模式运行,效率高。

3. 环境准备

3.1 安装Node.js

在开始之前,请确保已安装Node.js,可以通过以下命令检查版本:

node -v
npm -v

3.2 安装Puppeteer

在项目目录下,使用以下命令安装Puppeteer:

npm install puppeteer

3.3 安装代理库

为了使用代理IP,我们将安装proxy-chain库:

npm install proxy-chain

4. 代码实现

我们将以贝壳网为目标网站,爬取北京市二手房的价格数据,并使用爬虫代理进行代理配置。

4.1 代理配置

爬虫代理提供以下参数:

  • 代理域名proxy.16yun.cn
  • 端口8000
  • 用户名yourUsername
  • 密码yourPassword

4.2 完整代码

const puppeteer = require('puppeteer');
const proxyChain = require('proxy-chain');

(async () => {
   
    // 配置亿牛云爬虫代理 www.16yun.cn
    const proxyUrl = 'http://yourUsername:yourPassword@proxy.16yun.cn:8000';
    const newProxyUrl = await proxyChain.anonymizeProxy(proxyUrl);

    // 启动 Puppeteer 浏览器
    const browser = await puppeteer.launch({
   
        headless: true, // 无头模式
        args: [`--proxy-server=${
     newProxyUrl}`] // 使用代理服务器
    });

    const page = await browser.newPage();

    // 设置页面视口
    await page.setViewport({
    width: 1200, height: 800 });

    // 访问贝壳网二手房列表页面
    const url = 'https://bj.ke.com/ershoufang/';
    await page.goto(url, {
    waitUntil: 'networkidle2' });

    // 等待页面加载并选择价格元素
    await page.waitForSelector('.sellListContent .priceInfo .totalPrice .number');

    // 获取二手房列表的价格数据
    const prices = await page.{
   mathJaxContainer[0]}eval('.sellListContent .title a', elements =>
        elements.map(el => el.textContent.trim())
    );

    // 数据展示
    console.log('抓取到的二手房价格数据:');
    prices.forEach((price, index) => {
   
        console.log(`房源 ${
     index + 1}: 标题 - ${
     titles[index]}, 价格 - ${
     price} 万元`);
    });

    // 关闭浏览器
    await browser.close();
})();

4.3 代码解析

  1. 代理配置:通过proxyChain库配置代理IP,确保请求通过爬虫代理,避免IP被限制。
  2. 页面加载:使用waitForSelector等待页面加载完成,确保动态数据已经渲染。
  3. 数据提取:使用CSS选择器获取价格和标题数据,通过$$eval方法提取页面中的文本内容。

4.4 常见问题与解决方案

  1. 页面加载失败
    • 原因:代理IP连接不稳定或页面加载时间过长。
    • 解决方案:调整goto方法的超时时间,如{timeout: 60000}
  2. 选择器找不到元素
    • 原因:页面结构发生变化。
    • 解决方案:使用浏览器开发者工具重新分析页面,更新选择器。

5. 数据趋势分析

我们爬取了一定数量的二手房价格数据后,可以进行简单的数据分析,了解北京市二手房价格的分布趋势。以下是使用Python进行趋势分析的简单代码示例。

5.1 数据保存

将爬取的数据保存到data.json文件中,格式如下:

[
    {
   "title": "北京某小区一居室", "price": "800"},
    {
   "title": "北京某小区二居室", "price": "1200"}
]

5.2 数据分析与可视化

import json
import matplotlib.pyplot as plt

# 读取数据
with open('data.json', 'r') as file:
    data = json.load(file)

# 提取价格数据
prices = [int(item['price']) for item in data]
titles = [item['title'] for item in data]

# 绘制价格趋势图
plt.figure(figsize=(10, 6))
plt.plot(range(len(prices)), prices, marker='o')
plt.title('北京市二手房价格趋势')
plt.xlabel('房源编号')
plt.ylabel('价格 (万元)')
plt.grid()
plt.show()

5.3 结果分析

从价格趋势图中可以看出,北京市二手房价格存在一定的波动,具体趋势需要结合更多的数据样本和时间段进行深入分析。可以使用更多的数据分析工具(如Pandas)进行详细的统计分析。

6. 总结

本文详细介绍了如何使用Puppeteer结合CSS选择器实现对动态网页的数据爬取,并且通过代理IP技术规避反爬机制,确保爬虫的稳定性和成功率。我们以贝壳网为例,抓取了二手房价格数据,并进行了简单的趋势分析。

6.1 优化建议

  1. 代理IP轮换:可以使用多个代理IP进行轮换,避免因使用单一IP被封禁。
  2. 数据存储:可以使用MongoDB或MySQL等数据库进行数据持久化存储。
  3. 分布式爬取:结合Redis等任务队列工具,实现分布式爬取,提高爬取效率。

通过本文的学习,希望大家能够掌握使用Puppeteer进行动态网页爬取的基本方法,并能应用于实际项目中。Happy Coding!

相关文章
|
4月前
|
前端开发
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
|
5月前
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
246 1
|
5月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
62 0
|
5月前
|
JavaScript 内存技术
Vue动画——使用最新版Animate.css教程
Vue动画——使用最新版Animate.css教程
360 0
|
6月前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
35 0
|
7月前
|
前端开发
css教程-li的list-style-type属性
通过设置 `list-style-type`属性,你可以根据需求为列表项设置不同的标志样式,从而改变列表的外观。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
77 4
|
7月前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
94 2
|
7月前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。
166 1
|
7月前
|
前端开发 UED
CSS——如何取消a链接点击时的背景颜色
CSS——如何取消a链接点击时的背景颜色
116 1
下一篇
DataWorks