puppeteer库入门初探

puppeteer 是一个Chrome官方出品的headless Chrome node库。它提供了一系列的API, 可以在无UI的情况下调用Chrome的功能, 适用于爬虫、自动化处理等各种场景

根据官网上描述，puppeteer 具有以下作用:

以下就来阐述 puppeteer 的这几个作用

1.初始化项目

注: 这里我们会使用到 es6/7 的新特性，所以用 typescript 来编译代码

npm install puppeteer typescript @types/puppeteer

tsconfig.json 配置如下:

{ "compileOnSave": true, "compilerOptions": {  "target": "es5",  "lib": [   "es6", "dom"  ],  "types": [   "node"  ],  "outDir": "./dist/",  "sourceMap": true,  "module": "commonjs",  "watch": true,  "moduleResolution": "node",  "isolatedModules": false,  "experimentalDecorators": true,  "declaration": true,  "suppressImplicitAnyIndexErrors": true }, "include": [  "./examples/**/*", ]}

puppeteer 模块提供一个方法启动一个 Chromium 实例。

import * as puppeteer from 'puppeteer'(async () => { await puppeteer.launch()})()

上述代码通过 puppeteer 的 launch 方法生成一个 browser 实例，launch 方法可以接收一些配置项。较为常用的有:

2.生成页面截图

这里我们以 https://example.com/ 为例

(async () => { const browser = await puppeteer.launch(); //生成browser实例 const page = await browser.newPage();   //解析一个新的页面。页面是在默认浏览器上下文创建的 await page.goto("https://example.com/"); //跳转到 https://example.com/ await page.screenshot({          //生成图片  path: 'example.png' })})()

在这里需要注意的是，截图默认截取的是打开网页可视区的内容,如果要获取完整的可滚动页面的屏幕截图,需要添加 fullPage: true

执行 node dist/screenshot.js ，即可在根目录下生成 example.png

puppeteer 默认将页面大小设置为 800*600,可以通过 page.setViewport() 来改变页面大小。

不仅如此，puppeteer 还可以模拟手机

import * as puppeteer from "puppeteer"; import * as devices from "puppeteer/DeviceDescriptors"; const iPhone = devices["iPhone 6"];(async () => { const browser = await puppeteer.launch({  headless: false }); const page = await browser.newPage(); await page.emulate(iPhone); await page.goto("https://baidu.com/"); await browser.close();})();