是什么

取自 官网 Puppeteer is a Node.js library which provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer runs in headless mode by default, but can be configured to run in full (non-headless) Chrome/Chromium.

Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:

• Generate screenshots and PDFs of pages.
• Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR" (Server-Side Rendering)).
• Automate form submission, UI testing, keyboard input, etc.
• Create an automated testing environment using the latest JavaScript and browser features.
• Capture a timeline trace of your site to help diagnose performance issues.
• Test Chrome Extensions.

可以通过 puppeteer 提供的 API 去操作浏览器，重复性的去完成一些操作。

Case

case 1：打开 MDN 截个图

• 了解基本结构
  • puppeteer
  • browser
  • page

JavaScript
Copy
import puppeteer from "puppeteer"
;(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  })
  const page = await browser.newPage()

  await page.goto("https://developer.mozilla.org/")

  await page.screenshot({ path: "MDN.png", fullPage: true })

  await browser.close()
})()

case 2: 拿到飞书登陆态的cookie

• 等待行为
• 信息读取

流程梳理

1. 打开某个需要飞书登陆态的网页 如 审批管理后台列表页 「A」
2. 因为没有登陆态，所以进不去 A，会被重定向去扫码登陆页面「B」
3. 完成扫码后会跳回 「A」
4. 此时可以在 「A」页面读取登陆态的 cookie 信息

JavaScript
Copy
import puppeteer from "puppeteer"
;(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  })
  const page = await browser.newPage()

  await page.goto("https://www.feishu.cn/approval/admin/approvalList")

  // 带有这个类的元素在登陆页面不存在，在有登陆态的列表页存在
  await page.waitForSelector(".approval-header")

  // 去拿 cookie
  const cookies = await page.cookies()
  // 可以通过在当前 page 环境去执行 JavaScript 来拿到 cookie，但是有些 cookie 可能是 HttpOnly 就拿不到
  const cookieStr = await page.evaluate(() => {
    return document.cookie
  })
  // 保存下来，下次就可以直接用 cookie，不用再重新登陆了
  page.setCookie(...cookies)
  await browser.close()
})()

• Page.cookies() method
• Query Selectors

如何在 VSCode 中 debug node

• Toggle Auto Attach
  • smart
• new terminal
• node xxx.js