了解 Puppeteer

wanger 2018-02-12 收录于前端

一、什么是 `Puppeteer` ?

Puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具。Chrome 作为浏览器市场的领头羊，Chrome Headless 将成为 web 应用 自动化测试 的行业标杆。所以我们很有必要来了解一下它

无头浏览器是指没有窗口的浏览器

二、用它能做什么?

通过 Puppeteer 我们可以让浏览器帮我们自动完成很多事情,例如：

生成页面的截图或者 PDF
自动表单提交，UI 测试，键盘输入
创建自动化测试环境

三、如何安装 `Puppeteer` ?

安装 Puppeteer 很简单，如下：

1
2


npm i --save puppeteer
# or "yarn add puppeteer"

需要注意的是，由于用到了 ES7 的 async/await 语法，node 版本最好是 v7.6.0 或以上

四、一些实例

1、屏幕截图

 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("http://www.wangyulue.com");
  await page.screenshot({ path: "wanger.png" });

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

需要注意的是，Puppeteer将默认页面大小为800px x 600px，该大小定义了屏幕截图的大小。我们可以通过 Page.setViewport() 来设置截图页面大小。

2、将网页保存为 PDF

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(
    "https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md",
    { waitUntil: "networkidle2" }
  );
  await page.pdf({ path: "api.pdf", format: "A4" });

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

关于 page.pdf() 的更多可配置项，感兴趣的同学可以戳这里

3、模拟登录 GitHub

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


/**
 * @desc Logs into Github. Provide your username and password as environment variables when running the script, i.e:
 * `GITHUB_USER=myuser GITHUB_PWD=mypassword node github.js`
 */
const puppeteer = require("puppeteer");
const screenshot = "github.png";
(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto("https://github.com/login");
  await page.type("#login_field", process.env.GITHUB_USER);
  await page.type("#password", process.env.GITHUB_PWD);
  await page.click('[name="commit"]');
  await page.waitForNavigation();
  await page.screenshot({ path: screenshot });
  browser.close();
  console.log("See screenshot: " + screenshot);
})();

在 GitHub 上专门有一个 puppeteer 的 demo 集合库，感兴趣的同学可以戳这里了解

五、详细的 `Puppeteer` API

关于 Puppeteer 详细的 API 文档，感兴趣的同学可以戳这里

六、参考阅读

GoogleChrome/puppeteer

Puppeteer 与 Chrome Headless —— 从入门到爬虫

Puppeteer API

checkly/puppeteer-examples

目录