用于Chrome/Chromium的基于节点的库：Puppeteer - Web前端

浏览器开发人员工具为网站和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的实际示例。在本教程中，我们将是：

1. 使用Puppeteer生成Unsplash的屏幕截图

2. 使用Puppeteer创建黑客新闻PDF

3. 使用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.pngunsplash2.pngscreenshot

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.pdfA4

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可以自动执行您日常生活中无聊的任务。

标签：节点WebPuppeteerChromiumChrome