JavaScript 渲染内容爬取：Puppeteer 入门

news2025/4/22 23:39:44

在现代网络应用中，许多网页内容是通过 JavaScript 渲染生成的，传统的爬虫工具往往难以获取这些动态内容。Puppeteer 作为一种强大的浏览器自动化工具，为这一问题提供了优雅的解决方案。本文将带你入门 Puppeteer，介绍如何安装、启动浏览器、创建新页面、导航到指定页面以及模拟用户操作，为爬取动态网页内容做好准备。

一、Puppeteer 简介

Puppeteer 是一个由 Node.js 提供的库，它提供了一套高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。换句话说，Puppeteer 允许开发者在无头（headless）模式下自动化控制浏览器，进行网页爬取、自动化测试、页面截图等操作。无头模式指的是浏览器在后台运行，不显示图形界面。

二、安装 Puppeteer

在开始之前，需要确保你的项目中已经安装了 Puppeteer。可以通过以下命令进行安装：

mkdir puppeteer-demo
cd ./puppeteer-demo
npm init -y
npm install puppeteer

三、启动浏览器

启动浏览器是使用 Puppeteer 的第一步。以下是一个简单的示例：

const puppeteer = require('puppeteer');

async function startBrowser() {
  // 启动浏览器
  const browser = await puppeteer.launch({
    headless: true, // 设置为 false 可以看到浏览器界面
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  console.log('浏览器已启动');

  // 关闭浏览器
  await browser.close();
  console.log('浏览器已关闭');
}

startBrowser();

四、创建新页面

在启动浏览器后，通常需要创建一个新页面来进行操作：

async function createPage() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage(); // 创建新页面
  console.log('新页面已创建');

  await browser.close();
}

createPage();

五、导航到页面

使用 goto 方法可以导航到指定的 URL：

async function navigateToPage() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com', {
    waitUntil: 'networkidle2' // 等待网络空闲
  });
  console.log('页面加载完成');

  await browser.close();
}

navigateToPage();

六、模拟用户操作

Puppeteer 提供了丰富的 API 来模拟用户的交互行为，例如点击、输入文本等。

点击元素

点击页面上的按钮或链接：

async function clickElement() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.click('selector-of-button'); // 替换为实际的 CSS 选择器
  console.log('元素点击完成');

  await browser.close();
}

clickElement();

输入文本

在输入框中输入文本：

async function inputText() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.type('selector-of-input', '输入的文本内容'); // 替换为实际的 CSS 选择器
  console.log('文本输入完成');

  await browser.close();
}

inputText();

七、完整示例：模拟登录

以下是一个完整的示例，演示如何使用 Puppeteer 模拟登录操作：

async function simulateLogin() {
  const browser = await puppeteer.launch({ headless: false }); // 设置为 false 可以看到浏览器界面
  const page = await browser.newPage();

  await page.goto('https://example.com/login');
  await page.type('selector-of-username', 'your-username'); // 替换为实际的 CSS 选择器和用户名
  await page.type('selector-of-password', 'your-password'); // 替换为实际的 CSS 选择器和密码
  await page.click('selector-of-login-button'); // 替换为实际的 CSS 选择器

  // 等待登录完成
  await page.waitForNavigation({ waitUntil: 'networkidle2' });

  console.log('登录成功');
  // 进一步操作...

  // 保持浏览器打开，可手动关闭
  // await browser.close();
}

simulateLogin();