自动化神器Puppeteer使用教程

​Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过DevTools 协议控制 Chrome 或 Chromium 。Puppeteer默认无头运行，但可以配置为运行完整（非无头）Chrome 或 Chromium。

Puppeteer的用处非常多，凡是你能想到的网页自动化操作，他都可以做到。常见的使用场景有

• 生成页面的屏幕截图和 PDF。

• 抓取 SPA（单页应用程序）并生成预渲染内容（即“SSR”（服务器端渲染））。

• 抓取网页数据。

安装

npm i puppeteer

由于安装过程中会从google的网站里下载 Chromium浏览器，国内用户大概率是安装不上，所以在.npmrc文件添加一个下载镜像

PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors

 启动

const puppeteer = require('puppeteer');
​
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  // 将网页截图
  await page.screenshot({ path: 'example.png' });
​
  await browser.close();
})();

 常用方法 page.evaluate

这个方法是在网页中执行代码，要注意和当前执行的Node环境区分，除了第一个参数外，后面的参数都是向网页注入的数据，这里的数据类型只能是string number bool这样的基本类型。

const result = await page.evaluate((x) => {
  return Promise.resolve(8 * x);
}, 7);
console.log(result); // prints "56"

page.exposeFunction

这个方法可以向网页中注入自定义函数，解决了evaluate 传递的数据只能是基本类型。注意函数命名的问题，不要和当前环境下的命名冲突，不然执行时会出现函数名未定义的情况。

const puppeteer = require('puppeteer');
const crypto = require('crypto');
​
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.on('console', (msg) => console.log(msg.text()));
  await page.exposeFunction('md5', (text) =>
    crypto.createHash('md5').update(text).digest('hex')
);
  await page.evaluate(async () => {
    // use window.md5 to compute hashes
    const myString = 'PUPPETEER';
    const myHash = await window.md5(myString);
    console.log(`md5 of ${myString} is ${myHash}`);
  });
  await browser.close();
})();

 

page.on

这个方法可以用来监听网页的事件，比较常用的是来监听请求的。

this.page.on('response', (res) => {
  const url = res.url();
  const resourceType =  res.request().resourceType();
});

---

建了个新人小白的前端交流群820953059，群主热心解答，小伙伴们快来啦~~