来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

Puppeteer

一个npm包，拥有很多功能：

  • 支持分布式爬取
  • 实现了深度优先和广度优先算法
  • 支持csv和json line格式导出
  • 插件式的结果存储，比如支持redis
  • 自动插入jquery，可以使用jquery语法进行结果处理
  • 支持截图作为爬取证据
  • 支持模拟不同的设备

自动化UI测试

安装Puppeteer ：

1
pnpm add puppeteer

Puppeteer的包很大，足足100MB，因为他内置了Chromium（谷歌浏览器），所以适合用pnpm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import puppeteer from "puppeteer"

const sleep = (time: number) => {
  return new Promise((resolve, reject)=> {
    setTimeout(resolve,time)
  })
}

(async () => {
  // 通过launch生成一个“浏览器”实例
  const browser = await puppeteer.launch({
    // 默认是true，后台自动完成
    // 如果设为false，就能看到一个浏览器从打开到完成整个任务的全过程
    headless: false,
    // 将浏览器设置为全屏
    defaultViewport: null,
    args: ["--start-maximized"]
  })

  // 打开一个新标签页
  const page = await browser.newPage()
  // 跳转到指定页面
  await page.goto("https://jd.com")
  // 聚焦到需要测试的地方（这里是搜索框
  await page.focus("#key")
  // 输入文字
  await page.keyboard.sendCharacter("iphone14")
  // 搜索
  await page.click(".button")
  // 等待加载完成
  await page.waitForSelector(".gl-item")

  // 滚动直到底端
  let isScroll = true
  let step = 500
  while(isScroll) {
    // evaluate中的代码将在浏览器中执行
    isScroll = await page.evaluate((step)=> {
      // 滚动条距页面顶部的距离
      let scrollTop = document.scrollingElement?.scrollTop ?? 0
      // 向下滚动
      document.scrollingElement!.scrollTop = scrollTop+step
      // 是否滚动完成（body的高度是否大于滚动高度+首屏高度）
      return document.body.clientHeight > scrollTop+2080 ? true: false
    },step)

    await sleep(500)
  }

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

})()

puppeteer截的（好大一张）图