JavaScript 渲染内容爬取：Puppeteer 入门

在现代网络应用中，许多网页内容是通过 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();