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,群主热心解答,小伙伴们快来啦~~
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)