puppeteer 神器！

一、概述

puppeteer: https://github.com/GoogleChrome/puppeteer
按照其官网说法，puppeteer 提供 High-Level 的 API 去调用 headless Chrome 或者 Chromium

1.1 什么是 headless Chrome

见上篇文章 Headless Chrome 初体验

1.2 puppeteer经典案例

1.生成页面截图和PDF
2.爬取SPA或者SSR的页面
3.自动化表单提交，UI测试，键盘输出等用户操作
4.可以创建一个自动化测试环境，直接用最新版Chrome的JS和浏览器特性执行你的测试脚本
5.通过记录网站的时间轨迹日志帮助解决性性能问题

二、代码实现

https://github.com/zfha/headlessChrome

2.1 生成页面截图或PDF

页面截图

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://github.com');
  //默认为800px * 600px， 可自定义设置如下：
  //await page.setViewport({ width: 1400, height: 1200 });
  await page.screenshot({ path: 'github.png' });

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

此处，此函数默认的viewport是800px * 600px, 还可以通过Page.setViewPort() 自定义设置

PDF

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  //waitUntil可以设置为页面加载完成再返回
  await page.goto('https://github.com', { waitUntil: 'networkidle2' });
  //printBackground属性才能打印背景图片和颜色
  await page.pdf({ path: 'github.pdf', format: 'A4', printBackground: true });
  await browser.close();
})();

Page.pdf() 详细用法

2.2 执行JS脚本

const puppeteer = require('puppeteer');

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

  // 获取页面的viewport
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

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

  // 乘法计算
  const multiplication = await page.evaluate(x => {
    return Promise.resolve(8 * x);
  }, 7);
  console.log('multiplication', multiplication);

  // bodyHandle 这种 ElementHandle 也可以作为入参
  const bodyHandle = await page.$('body');
  const html = await page.evaluate(body => body.innerHTML, bodyHandle);
  console.log('html', html);
  await bodyHandle.dispose();

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

Page.evaluate() 详细用法
Page.$详细用法

2.3 模拟提交表单

模拟访问github网站，并且输入puppeteer进行搜索

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  //打开github网站
  await page.goto('https://github.com', { waitUntil: 'networkidle2' });

  //设置为1400，PC展示方式
  await page.setViewport({ width: 1400, height: 1200 });

  //往搜索框里面，加入文字puppeteer
  await page.type(
    '.js-site-search-form input.header-search-input',
    'puppeteer',
    { delay: 100 }
  );

  //模拟回车键
  await page.keyboard.press('Enter');

  //等待1s
  await page.waitFor(1000);
  await page.screenshot({ path: 'github.png' });
  await browser.close();
})();

Page.type 详细用法