Puppeteer初探

是什么

Puppeteer 是一个Node库，支持调用Chrome的API来操纵Web。Chrome团队在维护，会拥有更好的兼容性和前景。

用途

• 生成页面PDF或截图
• UI自动化测试
• 性能分析
• 爬虫

demo

• 安装
  npm i puppeteer 除了下载puppeteer包之外，还会下载最新版本的Chromium。
• 例一 UI测试
  文件名：1.js
  运行：node 1.js
  功能：进入掘金首页，1秒后点击前端tab，1秒后点击搜索框，搜索puppeteer，关闭浏览器。

const puppeteer = require('puppeteer');

async function testJuejinUi() {
  try {
    const browser = await puppeteer.launch({
      headless: false
    });
    const page = await browser.newPage();
    const dimensions = await page.evaluate(() => {
      return {
        width: window.outerWidth,
        height: window.outerHeight,
      };
    });
    await page.setViewport({
      width: dimensions.width,
      height: dimensions.height,
    })
    await page.goto('https://juejin.im/timeline');
    await page.waitFor(1000)
    await page.screenshot({ path: 'juejin-timeline.png' });
    await page.tap('.nav-list>li:nth-child(2)>span')
    await page.waitFor(1000)
    await page.screenshot({ path: 'juejin-timeline-frontend.png' });
    await page.type('.search-form>.search-input', 'puppeteer', { delay: 200 })
    await page.tap('.search-form>.search-icon')
    await page.waitFor(1000)
    await page.screenshot({ path: 'juejin-search.png' });
    await browser.close();
  } catch (error) {
    console.log(error)
  }
}
testJuejinUi()

• 例二 性能分析
  文件名：2.js
  运行：node 2.js
  功能：生成性能json文件。然后在控制台performance面板上传该json文件即可追踪到当时的性能情况。

const puppeteer = require('puppeteer');

async function testJuejinPerformance() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    const dimensions = await page.evaluate(() => {
      return {
        width: window.outerWidth,
        height: window.outerHeight,
      };
    });
    await page.setViewport({
      width: dimensions.width,
      height: dimensions.height,
    })
    await page.tracing.start({ path: 'trace.json' });
    await page.goto('https://juejin.im/timeline');
    await page.tracing.stop();
    await browser.close();
  } catch (error) {
    console.log(error)
  }
}
testJuejinPerformance()

• 例三 爬虫
  文件：3.js
  运行：node 3.js
  功能：爬取掘金首页推荐文章名称与作者，并写入文件。

const puppeteer = require('puppeteer');
const fs = require('fs');
async function testJuejinUi() {
  try {
    const browser = await puppeteer.launch({
      headless: false
    });
    const page = await browser.newPage();
    const dimensions = await page.evaluate(() => {
      return {
        width: window.outerWidth,
        height: window.outerHeight,
      };
    });
    await page.setViewport({
      width: dimensions.width,
      height: dimensions.height,
    })
    await page.goto('https://juejin.im/timeline');
    await page.waitFor(1000)
    let arr = await page.$$('ul.entry-list .entry-box')
    arr = Array.from(arr)
    const result = await Promise.all(arr.map(async (ele) => {
      const title = await ele.$eval('.title-row a.title', (dom) => {
        return dom.innerText
      })
      const author = await ele.$eval('li.username a', (dom) => {
        return dom.innerText
      })
      return title + '--' + author
    }))
    fs.writeFileSync('1.text', '')
    result.forEach((ele) => {
      fs.appendFileSync('1.text', ele + '\n')
    })
    await browser.close();
  } catch (error) {
    console.log(error)
  }
}
testJuejinUi()

常用API

const puppeteer = require('puppeteer');
const browser = puppeteer.launch()    // 创建浏览器实例
const page = await browser.newPage();   // 打开新页面
await page.goto('https://juejin.im/timeline');  // 新页面地址
await page.screenshot({ path: 'juejin-timeline.png' });  // 截图功能
await page.waitFor(1000)  // 等待1秒
await browser.close();  // 关闭浏览器
await page.tap('.search-form>.search-icon')  // 点击指定元素
await page.$(selector)  // 等同在页面内执行 document.querySelector
await page.$$(selector)  // 等同在页面内执行 document. querySelectorAll
await page.evaluate(pageFunction[, ...args])  // 在页面实例上下文中执行js函数

参考资料

Puppeteer中文文档
Puppeteer github