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

原创

jackcode

发布于 2024-11-14 07:21:35

31403

代码可运行

文章被收录于专栏：爬虫资料爬虫资料

运行总次数：3

代码可运行

1. 前言

在现代的网页中，许多数据是通过JavaScript动态加载的，这使得传统的爬虫工具（如requests或BeautifulSoup）无法获取到这些数据。因此，为了更好地处理动态网站的数据爬取，我们需要使用像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 () => {
    // 配置16yun爬虫代理 
    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.$$eval('.sellListContent .priceInfo .totalPrice .number', elements =>
        elements.map(el => el.textContent.trim())
    );

    // 获取标题
    const titles = await page.$$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 代码解析

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

4.4 常见问题与解决方案

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

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()