快速上手

Puppeteer（傀儡师）提供了基于 DevTools 协议控制 Chrome/Chromium 的 Node.js 模块，我们可以借助 Puppeteer 模块提供的一系列 API 来实现对网页的端到端测试任务。

特性：

1. 自动完成表单提交、UI 测试以及键盘输入等手动执行的工作；
2. 使用最新的 JavaScript 和浏览器功能穿件自动化测试环境；
3. 支持捕捉网页的跟踪时间线，用来帮助诊断性能问题；
4. 支持测试基于 Chrome 的扩展程序；
5. 支持网页屏幕截图和生成 PDF；
6. 对 SPA（单页面应用程序）进行爬取并生成预渲染内容（SSR）；

安装：

npm install puppeteer

• 安装时会自动下载最新版的 Chrome for Testing 和 chrome-headless-shell（从 v21.6.0 开始）二进制文件。默认浏览器会下载到 $HOME/.cache/puppeteer （从 v19.0.0 开始）文件夹。
• 如何你需要连接到远程浏览器或自行管理浏览器，则可以使用puppeteer-core，puppeteer-core 不提供任务默认值，并且不会自动安装 Chrome。

开始：

初始化一个空项目：

mkdir start-pptr && cd start-pptr
npm init -y
npm i puppeteer
echo 'console.log("Hello World!");' > index.mjs
npm pkg set scripts.start="node index.mjs" // v7.24.2 +

非 headless 模式下完成浏览器的启动和导航：

import puppeteer from 'puppeteer'

(async () => {
  	// 启动浏览器并打开一个空页面
    const browser = await puppeteer.launch({
        headless: false,
    })
    const page = await browser.newPage()
    
    // 将页面导航到指定 URL
    await page.goto('https://developer.mozilla.org/zh-CN/')
    // 运行完所有操作可以通过此 API 关闭浏览器
    // await browser.close()
})()

现在通过一个完整的示例来演示 Puppeteer 的工作流程：

import puppeteer from 'puppeteer'

(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto('https://developer.mozilla.org/zh-CN/')

		// 在搜索框输入 ‘开始使用 Vue’ 关键词
    await page.type('#hp-search-input', '使用 Vue')

  	// 等待搜索提示出现，并点击第一个提示词
    const searchResultSelector = '.result-item'
    await page.waitForSelector(searchResultSelector)
    await page.click(searchResultSelector)

  	// 通过文本选择器匹配包含 ‘使用 Vue’ 的选择器
    const titleSelector = await page.waitForSelector('text/使用 Vue')
    // 获取此选择器的全部文本内容并打印
    const fullTitle = await titleSelector.evaluate(el => el.textContent)
    console.log(fullTitle)

    await browser.close()
})()

环境要求：

1. Node.js 18+；
2. TypeScript 4.7.4+ （选择使用 TypeScript 时需注意版本）；
3. 操作系统：Windows x64、MacOS x64、MacOS arm64 以及 Debian/Ubuntu Linux x64架构。