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();})();