puppeteer使用记录

文档地址

一：常用API

1. Browser

方法名称	方法说明	个人经验
browser.newPage()	创建一个Page实例
browser.close()	关闭浏览器	注意catch住异常关闭，避免浏览器进程没有关闭掉，耗费系统资源
browser.pages()	获取所有打开的page实例	打开多个tab页处理时切换page特别有用

2.page 常用

方法名称	方法说明	个人经验
puppeteer.launch	启动浏览器	调试时推荐slowMo，headless，devtools 这三个参数
page.goto(url)	打开指定网站	注意使用它的waitUntil参数，默认是load，有时会超时
page.screenshot	把当前页面截图	不但可以截图也可以截取元素的图片
Page.$(selector)	获取单个元素,底层是调用的是 document.querySelector()
Page.$$(selector)	获取一组元素,底层调用的是document.querySelectorAll()	注意返回的参数经过Array.form了，可能有些参数不能够使用
page.$eval(selector, pageFunction[, ...args])	此方法在页面内执行 document.querySelector，然后把匹配到的元素作为第一个参数传给 pageFunction	是在在浏览器实例上下文中要执行的方法
page.$$eval(selector, pageFunction[, …args])	此方法在页面内执行 Array.from(document.querySelectorAll(selector))，然后把匹配到的元素数组作为第一个参数传给 pageFunction
page.click()	点击一个元素
Page.emulate	修改模拟器(客户端)运行配置，模拟设备，参数设备对象，比如 iPhone, Mac, Android 等
page.evaluate(pageFunction, …args)	返回一个可序列化的普通对象，pageFunction 表示要在页面执行的函数， args 表示传入给 pageFunction 的参数， 下面的 pageFunction 和 args 表示同样的意思。	注意是在浏览器页面执行
Page.evaluateHandle(pageFunction, …args)	在 Page 上下文执行一个 pageFunction, 返回 JSHandle 实体	Page 上下文执行
page.evaluateOnNewDocument(pageFunction, …args)	在文档页面载入前调用 pageFunction, 如果页面中有iframe或者frame, 则函数调用 的上下文环境将变成子页面的，即iframe 或者 frame, 由于是在页面加载前调用，这个函数一般是用来初始化 javascript 环境的，比如重置或者 初始化一些全局变量
Page.exposeFunction	此方法添加一个命名为 name 的方法到页面的 window 对象, 当调用 name 方法时，在 node.js 中执行 puppeteerFunction，并且返回 Promise 对象，解析后返回 puppeteerFunction 的返回值	使用时会变成全局的，也可以引用你的类库

3. page waitFor 系列 API

方法名称	方法说明	个人经验
page.waitFor	下面四个个的综合 API，不写就类似于java的Thread.sleep
page.waitForFunction(pageFunction[, options[, …args]])	等待 pageFunction 执行完成之后
page.waitForNavigation(options)	等待页面基本元素加载完之后，比如同步的 HTML, CSS, JS 等代码
page.waitForSelector(selector[, options])	css语法，等待某个选择器的元素加载之后，这个元素可以是异步加载的
page.waitForXPath(xpath[, options])	xpath语法，等待某个选择器的元素加载之后，这个元素可以是异步加载的

附录：

• XPath: 是一门在 XML 文档中查找信息的语言 https://www.w3school.com.cn/xpath/index.asp

二：实战记录

1. 页面等待

• page.waitFor 页面等待，可以是时间、某个元素、某个函数
• 自定义函数

  const timeout = function (delay: number) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        try {
          resolve(1);
        } catch (e) {
          reject(e);
        }
      }, delay);
    });
  };
  

2. 启动一个浏览器环境

  const browser = await puppeteer.launch({
  // 用来设置chromium/chrome的路径
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
    // 是否以 '无头模式' 运行浏览器。默认是 true
    headless: false,
    // 自动打开DevTools面板
    devtools: true,
  });

3. page.evaluate()相关问题

• 在page.evaluate()中传参

  const links = await page.evaluate((evalVar) => {
    console.log(evalVar); 
    …
  }, evalVar);
  

• page.evaluate()内使用外部函数
  可以使用如：await page.exposeFunction('screenshot', screenshot);
  将截图函数screenshot设置为全局函数，这样就能在page.evaluate()内访问了。

4. page._client.send

作用： 向Chrome发送协议

• 设置网速

     await (page as any)._client.send('Network.emulateNetworkConditions', {
        offline: false,
        latency: 200, // ms
        downloadThroughput: 780 * 1024 * 2, // 780 kb/s
        uploadThroughput: 330 * 1024 * 2, // 330 kb/s
      });
  
  

三：相关插件

• chalk 一个颜色插件，可以用来改变console输出的颜色。

未完待续。。。