了解Puppeteer

时间 2019-11-07

标签了解 puppeteer 繁體版

原文原文链接

最近谷歌官方出了个挺火的库 -- `Puppeteer`，咱们来了解一下它

1、什么是 `Puppeteer` ?

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

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

2、用它能作什么?

经过 Puppeteer 咱们可让浏览器帮咱们自动完成不少事情,例如：github

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

3、如何安装 `Puppeteer` ?

安装 Puppeteer 很简单，以下：web

npm i --save puppeteer
# or "yarn add puppeteer"
复制代码

须要注意的是，因为用到了ES7的 async/await 语法，node 版本最好是v7.6.0或以上npm

4、一些实例

一、屏幕截图

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() 来设置截图页面大小。api

二、将网页保存为PDF

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() 的更多可配置项，感兴趣的同窗能够戳这里浏览器

三、模拟登陆GitHub

/** * @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)
})()
复制代码