Puppeteer 使用

Puppeteer

概念：

headless browser（无头浏览器）：

• 是一种在无界面的环境中运行浏览器，与正常浏览器的区别
  • 直接通过命令行或者程序语言操作
  • 没有界面，少了加载 css/js、渲染页面的工作，比真实浏览器更快，更稳定

Puppeteer： 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行

Selenium: 2004年就发布了，支持多种浏览器，多编程语言

Puppeteer & Selenium 对比

功能：

• 网页截图或者生成 PDF
• 爬取 SPA 或 SSR 网站
• UI 自动化测试，模拟表单提交，键盘输入，点击等行为
• 捕获网站的时间线，帮助诊断性能问题
• 创建一个最新的自动化测试环境，使用最新的 js 和最新的 Chrome 浏览器运行测试用例
• 测试 Chrome 扩展程序

实例：

• 截图 或 生成PDF。

const puppeteer = require('puppeteer');

(async () => {
   
    // 生成browser实例
    const browser = await puppeteer.launch();
    // 调出界面配置
    // const browserConfig = {
   
    //     headless: false
    // };
    // const browser = await puppeteer.launch(browserConfig);

    // 解析一个新的页面。页面是在默认浏览器上下文创建的
    const page = await browser.newPage();
    await page.setViewport({
    width: 1000, height: 500 });
    await page.goto('https://www.jianshu.com/p/c269277ca2d4');

    // 生成图片
    await page.screenshot({
    path: 'images/example.png' });

    // 生成pdf
    await page.pdf({
    path: 'page.pdf' });

    // 截全屏
    await page.screenshot({
   
        path: 'images/homepage.png',
        fullPage: true
    })

    // 截取对应选择器部分
    await page.goto('https://www.baidu.com');
    let clip = await page.evaluate(() => {
   
        let {
   
            x,
            y,
            width,
            height
        } = document.getElementById('form').getBoundingClientRect();
        return {
   
            x,
            y,
            width,
            height
        };
    });

    await page.screenshot({
   
        path: 'images/baidu.png',
        clip: clip //设置clip 属性
    });

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

• 生成页面 或 爬虫

  // 生成页面
  const Koa = require('koa');
  const fs = require('fs');
  const puppeteer =