Puppeteer基础入门--Puppeteer初探

Puppeteer初探

课程目标

• ✅ 完成Puppeteer开发环境搭建
• ✅ 掌握浏览器实例的启动与关闭
• ✅ 实现页面导航与基础信息获取

---

环境搭建

1. 前置条件

# 检查Node.js版本（需>=14.0）
node -v

# 推荐使用npm 7+（包含workspaces功能）
npm -v

# 可用nvm进行nodejs版本管理

2. 创建项目

nrm安装指南

mkdir puppeteer-demo && cd puppeteer-demo
npm init -y

3. 安装依赖

nrm安装指南

# 核心库（自动下载Chromium）
npm install puppeteer

# 国内用户推荐使用镜像加速
# 可通过nrm进行镜像管理

💡 注意：完整版Chromium约180MB，安装失败时可设置环境变量：

export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true  # 跳过自动下载

---

核心API详解

1. 启动浏览器

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器实例
  const browser = await puppeteer.launch({
      headless: false, // 显示浏览器窗口
      executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', // 指定Chrome路径
      args: ['--no-sandbox', '--disable-setuid-sandbox'], // 添加沙箱模式禁用选项
      env: { NODE_ENV: 'production' }, // 指定环境变量
  });
  
  // 后续操作...
  setTimeout(async () => {
      // 关闭浏览器实例
      await browser.close();
  }, 2000);
})();

🔧 参数说明：

• headless: false 可启动可视化浏览器
• slowMo: 100 可放慢操作速度（调试用）
• devtools: true 自动打开开发者工具

2. 创建页面实例

const page = await browser.newPage();

// 设置页面属性
await page.setViewport({
  width: 1920,
  height: 1080,
  deviceScaleFactor: 1,
});

3. 页面导航

try {
  // 基础导航
  await page.goto('https://www.baidu.com', {
    waitUntil: 'networkidle2', // 等待网络空闲
    timeout: 30000            // 超时时间（默认30秒）
  });

  // 获取页面信息
  console.log('页面标题:', await page.title());
  console.log('页面URL:', page.url());
  
} catch (err) {
  console.error('导航失败:', err);
}

🌐 等待策略：

• load：页面加载事件触发
• domcontentloaded：HTML解析完成
• networkidle0：500ms内无网络请求
• networkidle2：500ms内不超过2个网络请求

---

实战案例：访问百度首页

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器实例
  const browser = await puppeteer.launch({
      headless: false, // 显示浏览器窗口
      executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', // 指定Chrome路径
      args: ['--no-sandbox', '--disable-setuid-sandbox'], // 添加沙箱模式禁用选项
      env: { NODE_ENV: 'production' }, // 指定环境变量
  });

  const page = await browser.newPage();

  // 设置页面属性
  await page.setViewport({
      width: 1920,
      height: 1080,
      deviceScaleFactor: 1,
  });

  try {
      // 基础导航
      await page.goto('https://www.baidu.com', {
          waitUntil: 'networkidle2', // 等待网络空闲
          timeout: 30000, // 超时时间（默认30秒）
      });

      // 获取页面信息
      console.log('页面标题:', await page.title());
      console.log('页面URL:', page.url());

      // 保存截图
      await page.screenshot({
          path: './baidu.png',
          fullPage: true,
      });
  } catch (err) {
      console.error('导航失败:', err);
  }

  setTimeout(async () => {
      // 关闭浏览器实例
      await browser.close();
  }, 2000);
})();

---

常见问题排查

❌ 浏览器无法启动

• 检查防火墙是否阻止Chrome进程

• Linux服务器安装依赖：

  sudo apt-get install -y gconf-service libgbm-dev libasound2 libatk1.0-0 libc6 libcairo2...
  

❌ 页面白屏

• 添加--disable-web-security启动参数
• 检查是否触发网站反爬机制

❌ 超时错误

• 适当增加timeout参数
• 使用page.waitForNavigation()组合控制

---

课后任务

1. 尝试用无头模式访问https://www.baidu.com并截图
2. 修改waitUntil参数观察页面加载差异
3. 捕获并处理页面导航错误（如404页面）

📁 示例代码已上传至GitHub仓库的/chapter1-demo目录

下节预告：元素操作基础 - 学习如何定位和提取页面数据 🎯