浏览器开发人员工具为网站和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可以自动执行您日常生活中无聊的任务。
网友评论文明上网理性发言 已有0人参与
发表评论: