puppeteer详解

简介

puppeteer库是一个Node库，它提供了一个高级API来控制DevTools协议上的 Chrome或Chromium 。Puppeteer 默认运行无头，但可以配置为运行完整（非无头）Chrome或Chromium
在浏览器中能做的事情大多数都能在puppeteer中完成!

比如:

  • 生成页面的屏幕截图和PDF。
  • 抓取SPA（单页面应用程序）并生成预渲染内容（即“SSR”（服务器端渲染））。
  • 自动化表单提交，UI测试，键盘输入等。
  • 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
  • 捕获网站的时间线跟踪，以帮助诊断性能问题。
  • 测试Chrome扩展程序。

安装

1
npm i puppeteer # 或 "yarn add puppeteer"

如果你不想下载内置的Chromium,那么你需要这样做: 

1
npm i puppeteer-core # 或 "yarn add puppeteer-core"

官方实例

1
2
3
4
5
6
7
8
9
10
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

是不是很简单呢?

超时处理

{12,23}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//这介绍了对超时常规的用法,配合try catch使用
//尽可能将您的行为放在async异步操作里.  
//对于抓取的页面数据很多的话可能控制台不能很好调试分析,那么异步输出文件是一种理想的方式.
const puppeteer = require('puppeteer');
const {TimeoutError} = require('puppeteer/Errors');
const fs = require('fs');
let url = 'https://www.baidu.com';

(async function getHtml(){
    const browser = await puppeteer.launch({
        headless: false,
        timeout: 10000
    });
    const page = await browser.newPage();

    try {
        await page.goto(url, {});
        await page.waitForSelector("body");
        domInnerHTML = await page.$eval("body", dom => dom.innerHTML);
        //await console.log(domInnerHTML);
        console.log("未超时");
    } catch (e) {
        if (e instanceof TimeoutError) {
            await page.waitForSelector("body");
            domInnerHTML = await page.$eval("body", dom => dom.innerHTML);
            //await console.log(domInnerHTML);
            console.log("超时了");
        }
    }
    fs.appendFileSync( "./index.html", domInnerHTML,err => {
        // err && console.log(err);
    });
    await browser.close();
})()