初识 Puppeteer

什么是 Puppeteer

Puppeteer 是一个基于 Chrome Devtools 协议，Puppeteer 可以让用户界面测试变得很轻松。

安装

当你安装 Puppeteer 时，会下载一个最新版本的 Chromium。Puppeteer 依赖于 Node v6.4.0 及以上版本，推荐安装 7.6 版本以上的 Node。

npm i puppeteer

或者

yarn add puppeteer

Demo

• 截屏

保存名为 example.js 的文件

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: 'baidu.png'});

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

在命令行中运行

node example.js

Puppeteer 默认截屏大小为 800 * 600。这个大小可以通过 Page.setViewport() 方法自定义。

• PDF

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com', {
        waitUntil: 'networkidle2'
    });
    await page.pdf({
        path: 'hn.pdf',
        format: 'A4'
    });
    await browser.close();
})();

• 获取页面信息

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log('Dimensions:', dimensions);

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

常用 API

• setViewport 常用参数

{
    width: 1024,
    height: 3000,
    isMobile: false,    // 是否启用移动设备模式
}

• screenshot 常用参数

{
    fullPage: true, // 是否截取整个页面
    path: 'image',  // 文件名，也可以写成 image.png
    type: 'png',    // 仅支持 png 和 jpeg
    omitBackground: true    // 是否支持透明度
}

• pdf 常用参数

headless: false 不支持 pdf

{
    path: '1.pdf',
    scale: 1,   // 缩放比例
    printBackground: true,  // 是否打印背景色
    landscape: false,   // 是否横向打印
    formart: 'A4'
}

调试运行

• 关掉无界面模式

headless 可以启动浏览器查看模式

const browser = await puppeteer.launch({
    headless: false
});

• 减慢速度

slowMo 属性可以帮助你看清发生了什么。单位为 ms。

const browser = await puppeteer.launch({
    slowMo: 250
});

实践应用

我们可以通过使用 Puppeteer 来自动化测试网页，从而解放双手。

const puppeteer = require('puppeteer');

(async()=>{
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    const mouse = await page.mouse;
    await page.goto('https://www.baidu.com/');
    await page.type('#txtUserName', 'sa', {
        delay: 250
    });
    await page.tap('#btnLoginNew');
    await page.waitFor(2000);
    await page.evaluate(()=>{
        let array = Array.from(window.frames[2].document.querySelectorAll('li'));
        array.map(item=>{
            if(item.innerText==='智能排班'){
                item.onclick();
            }
        });
    })
})();