puppeteer 初探

发表于 | 分类于

puppeteer介绍

Puppeteer是一个用户界面自动化工具。它通过使用Chrome无界面模式和DevTools协议的组合来实现这一点。正如上面的引用所言，它使用一个更上层的API来封装其功能，让用户界面测试自动化变得轻而易举。

它能做什么？

  • 生成网页截图或者 PDF
  • 高级爬虫，可以爬取大量异步渲染内容的网页
  • 模拟键盘输入、表单自动提交、登录网页等，实现 UI 自动化测试
  • 捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

API

API 地址 https://github.com/GoogleChrome/puppeteer/blob/v1.4.0/docs/api.md

实例

截图

首先实现一个简单的百度首页截图功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
})();

生成pdf

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://www.baidu.com/', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'baidu.pdf', format: 'A4'});
  await browser.close();
})();

爬取页面

以我的博客首页https://aromameng.github.io/为例，爬取每篇博客的标题。

这个功能可以用于爬取api数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const puppeteer = require("puppeteer");
(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("https://aromameng.github.io/", { waitUntil: "networkidle2" });
    // page.evaluate 中可以直接操作dom
    const links = await page.evaluate(() => {
        const anchors = Array.from(document.querySelectorAll(".post-title-link"));
        return anchors.map(anchor => anchor.textContent);
    });
    // 打印标题
    console.log(links.join("\n"));
    browser.close();
})();

更多功能还在学习中。。。

参考

显示 Gitment 评论