51工具盒子
浏览器开发人员工具为网站和Web应用程序的底层提供了许多惊人的选择。这些功能可以通过第三方工具进一步增强和自动化。在本文中，我们将研究Puppeteer，这是一个用于Chrome / Chromium的基于节点的库。
一个Node库，它提供了高级API来通过DevTools协议控制Chrome或Chromium。Puppeteer默认情况下无头运行，但可以配置为运行完整（无头）的Chrome或Chromium。
Puppeteer由Google Chrome背后的团队开发，因此您可以肯定它将得到很好的维护。它使我们能够通过一个简单易用的API通过JavaScript以编程方式在Chromium浏览器上执行常见操作。
使用Puppeteer，您可以：
抓取网站
生成网站截图，包括SVG和Canvas
创建网站PDF
搜寻SPA（单页应用程序）
使用标准DOM API访问网页并提取信息
生成预渲染的内容-即服务器端渲染
自动提交表单
自动化性能分析
像Cypress一样自动化UI测试
测试chrome扩展
Puppeteer并没有Selenium，PhantomJS（现已不推荐使用）之类的东西做任何新的事情，但是它提供了一个简单易用的API，并提供了很好的抽象性，因此我们不必担心问题的实质。细节处理。
它也得到了积极的维护，因此Chromium支持ECMAScript的所有新功能。
先决条件
对于本教程，您需要JavaScript，ES6 +和Node.js的基础知识。
您还必须已经安装了最新版本的Node.js的。
yarn在本教程中，我们将一直使用。如果yarn尚未安装，请从此处安装。
为了确保我们在同一页面上，这些是本教程中使用的版本：
Node 12.12.0
yarn 1.19.1
puppeteer 2.0.0
安装
要在项目中使用Puppeteer，请在终端中运行以下命令：
$ yarn add puppeteer
注意：安装Puppeteer时，它会下载保证可与该API一起使用的Chromium的最新版本（〜170MB macOS，〜282MB Linux，〜280MB Win）。要跳过下载，请参阅环境变量。
如果您不需要下载Chromium，则可以安装：puppeteer-core
$ yarn add puppeteer-core
puppeteer-core旨在成为Puppeteer的轻量级版本，用于启动现有的浏览器安装或连接到远程浏览器。确保您安装的puppeteer-core版本与您打算连接的浏览器兼容。
注意：仅从1.7.0版发布。puppeteer-core
用法
Puppeteer至少需要Node v6.4.0，但我们将使用async / await，仅在Node v7.6.0或更高版本中受支持，因此请确保将Node.js更新到最新版本以获取所有好处。 。
让我们深入研究一些使用Puppeteer的实际示例。在本教程中，我们将是：
-
使用Puppeteer生成Unsplash的屏幕截图
-
使用Puppeteer创建黑客新闻PDF
-
使用Puppeteer登录Facebook
1.使用Puppeteer生成Unsplash的屏幕截图
使用Puppeteer做到这一点真的很容易。继续，在项目的根目录中创建一个文件。然后粘贴以下代码：screenshot.js
const puppeteer = require('puppeteer')const main = async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://unsplash.com')
await page.screenshot({ path: 'unsplash.png' })
await browser.close()}main()
首先，我们需要puppeteer包装。然后，我们launch在其上调用初始化实例的方法。此方法是异步的，因为它返回一个Promise。因此，我们await为其获取browser实例。
然后我们调用newPage它并转到Unsplash并对其进行截图，并将截图另存为。unsplash.png
现在继续输入以下内容在终端中运行以上代码：
$ node screenshot
现在，在5-10秒后，您将在项目中看到一个包含Unsplash屏幕截图的文件。请注意，视口设置为800px x 600px，因为Puppeteer将此视口设置为初始页面尺寸，该尺寸定义了屏幕截图的尺寸。可以使用Page.setViewport()自定义页面大小。unsplash.png
让我们将视口更改为1920px x 1080px。在goto方法之前插入以下代码：
await page.setViewport({
width: 1920,
height: 1080,
deviceScaleFactor: 1,})
现在，继续前进，也可以更改文件名以在像这样的方法：unsplash.png``unsplash2.png``screenshot
await page.screenshot({ path: 'unsplash2.png' })
现在，整个文件应如下所示：screenshot.js
const puppeteer = require('puppeteer')const main = async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.setViewport({
width: 1920,
height: 1080,
deviceScaleFactor: 1,
})
await page.goto('https://unsplash.com')
await page.screenshot({ path: 'unsplash2.png' })
await browser.close()}main()
2.使用Puppeteer创建黑客新闻PDF
现在创建一个名为的文件，并将以下代码粘贴到其中：pdf.js
const puppeteer = require('puppeteer')const main = async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' })
await page.pdf({ path: 'hn.pdf', format: 'A4' })
await browser.close()}main()
我们仅从screenshot代码中更改了两行。
首先，我们将网址替换为Hacker News，然后添加了networkidle2：
await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' })
networkidle2 对于进行长时间轮询或任何其他附带活动的页面非常有用，并且当至少两个网络连接持续至少500毫秒时，认为导航已完成。
然后，我们调用了pdf创建PDf 的方法并将其调用，并将其格式化为大小：hn.pdf``A4
await page.pdf({ path: 'hn.pdf', format: 'A4' })
而已。现在，我们可以运行该文件来生成Hacker News的PDF。让我们继续在终端中运行以下命令：
$ node pdf
这将在项目的根目录中生成A4大小的PDF文件。hn.pdf
3.使用Puppeteer登录到Facebook
使用以下代码创建一个名为的新文件：signin.js
const puppeteer = require('puppeteer')const SECRET_EMAIL = 'example@gmail.com'const SECRET_PASSWORD = 'secretpass123'const main = async () => {
const browser = await puppeteer.launch({
headless: false,
})
const page = await browser.newPage()
await page.goto('https://facebook.com', { waitUntil: 'networkidle2' })
await page.waitForSelector('#login_form')
await page.type('input#email', SECRET_EMAIL)
await page.type('input#pass', SECRET_PASSWORD)
await page.click('#loginbutton')
// await browser.close()}main()
我们创建了两个变量SECRET_EMAIL 和SECRET_PASSWORD，应将其替换为您的Facebook电子邮件和密码。
然后，我们launch的浏览器，并设置headless模式，false推出了完整版的Chromium浏览器的。
然后，我们转到Facebook，等待所有内容加载完毕。
在Facebook上，#login_form可以通过DevTools访问选择器。该选择器包含登录表单，因此我们使用waitForSelector方法来等待它。
然后，我们需要输入我们的email和password，所以我们抓住选择input#email，并input#pass从DevTools，并通过我们的SECRET_EMAIL和SECRET_PASSWORD。
之后，我们单击#loginbutton以登录到Facebook。
最后一行被注释掉，使我们看到了打字的全过程email，并password和点击登录按钮。
在终端中键入以下内容，继续运行代码：
$ node signin
这将启动整个Chromium浏览器，然后登录Facebook。
结论
在本教程中，我们创建了一个项目，该项目创建指定视口内任何给定页面的屏幕截图。我们还建立了一个项目，可以在其中创建任何网站的PDF。然后，我们以编程方式设法登录了Facebook。
Puppeteer最近发布了版本2，它是一个很好的软件，可以通过简单易用的API自动执行琐碎的任务。
您可以在其官方网站上了解有关Puppeteer的更多信息。这些文档非常好，有大量的示例，并且所有文档都有据可查。
现在，使用Puppeteer可以自动执行您日常生活中无聊的任务。
