×

用于Chrome/Chromium的基于节点的库:Puppeteer

作者:Terry2019.11.19来源:Web前端之家浏览:9093评论:0
关键词:PuppeteerChromium

500.jpg

浏览器开发人员工具为网站和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


QQ截图20191119143757.jpg

现在,在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方法来等待它。

然后,我们需要输入我们的emailpassword,所以我们抓住选择input#email,并input#pass从DevTools,并通过我们的SECRET_EMAILSECRET_PASSWORD

之后,我们单击#loginbutton以登录到Facebook。

最后一行被注释掉,使我们看到了打字的全过程email,并password和点击登录按钮。

在终端中键入以下内容,继续运行代码:

$ node signin

这将启动整个Chromium浏览器,然后登录Facebook。

结论

在本教程中,我们创建了一个项目,该项目创建指定视口内任何给定页面的屏幕截图。我们还建立了一个项目,可以在其中创建任何网站的PDF。然后,我们以编程方式设法登录了Facebook。

Puppeteer最近发布了版本2,它是一个很好的软件,可以通过简单易用的API自动执行琐碎的任务。

您可以在其官方网站上了解有关Puppeteer的更多信息。这些文档非常好,有大量的示例,并且所有文档都有据可查。

现在,使用Puppeteer可以自动执行您日常生活中无聊的任务。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/Puppeteer20191119.html

网友评论文明上网理性发言 已有0人参与

发表评论: