Node.js库puppeteer接口及常用API总结

导读

这篇文章，主要用于收集整理常用的Puppeteer的一些常用API操作，自动化操作，爬虫测试，基础使用等等。当然至于是什么是Puppeteer呢，我们来看下官方介绍：Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

首先备注好中文API文档地址：点击打开Puppeteer中文文档API查看访问URL地址
官方API文档地址：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
比较不错的新手文档资料参考：小一辈无产阶级码农的《Puppeteer 入门教程》

环境和安装

cnpm i puppeteer -S

安装的时候需要注意deshi ，Puppeteer安装时自带一个最新版本的Chromium，可以通过设置环境变量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳过下载。如果不下载的话，启动时可以通过puppeteer.launch([options])配置项中的executablePath指定Chromium的位置。

基本使用

我们可以通过操作Browser实例来操作浏览器作出对应的事情，比如生成页面，窗口截图、生成pdf文件（文字可复制），获取页面数据等等，这些都是可以做到的。

const puppeteer = require('puppeteer');

(async () => {
   
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');
  await page.screenshot({
   path: 'example.png'});
  await page.pdf({
   path: 'example.pdf', format: 'A4'});
  await browser.close();
})();

当然，我们也可以新增一个headless:true，不打开浏览器就能执行我们的各种操作，默认后台运行，修改如下：

const browser = await puppeteer.launch({
   headless:false})

new browser.newPage() : 这个方法可以打开一个新选项卡并返回选项卡的实例page，通过page上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印pdf的操作。

当然我们最常用还是，动态的植入JS脚本，操作页面上的元素，并且获取一些信息，那我们该如何来实现呢？我们可以使用page.evaluate(pageFunction, ...args)来实现这一目的，向页面注入我们的自定义函数：

const puppeteer = require('puppeteer');

(async () => {
   
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
   
    // 在这里可以进行DOM操作
    return {
   
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });
  console.log('Dimensions:', dimensions);
  await browser.