生成网站截图澳门金莎网址

浏览器开发人员工具为网站和Web应用程序的底层提供了许多惊人的选择。这些功能可以通过第三方工具进一步增强和自动化。在本文中,我们将研究Puppeteer,这是一个用于Chrome
/ Chromium的基于节点的库。

生成网站截图澳门金莎网址。一个Node库,它提供了高级API来通过DevTools协议控制Chrome或Chromium。Puppeteer默认情况下无头运行,但可以配置为运行完整的Chrome或Chromium。

Puppeteer由Google
Chrome背后的团队开发,因此您可以肯定它将得到很好的维护。它使我们能够通过一个简单易用的API通过JavaScript以编程方式在Chromium浏览器上执行常见操作。

使用Puppeteer,您可以:

生成网站截图,包括SVG和Canvas

使用标准DOM API访问网页并提取信息

生成网站截图澳门金莎网址。生成预渲染的内容-即服务器端渲染

像Cypress一样自动化UI测试

生成网站截图澳门金莎网址。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,请在终端中运行以下命令:

$yarnaddpuppeteer

注意:安装Puppeteer时,它会下载保证可与该API一起使用的Chromium的最新版本(〜170MB
macOS,〜282MB Linux,〜280MB Win)。要跳过下载,请参阅环境变量。

如果您不需要下载Chromium,则可以安装:puppeteer-core

$yarnaddpuppeteer-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

constpuppeteer=requireconstmain=async()=>{constbrowser=awaitpuppeteer.launch()constpage=awaitbrowser.newPage()awaitpage.goto('https://unsplash.com')awaitpage.screenshot({path:'unsplash.png'})awaitbrowser.close

首先,我们需要puppeteer包装。然后,我们launch在其上调用初始化实例的方法。此方法是异步的,因为它返回一个Promise。因此,我们await为其获取browser实例。

然后我们调用newPage它并转到Unsplash并对其进行截图,并将截图另存为。unsplash.png

现在继续输入以下内容在终端中运行以上代码:

$nodescreenshot

现在,在5-10秒后,您将在项目中看到一个包含Unsplash屏幕截图的文件。请注意,视口设置为800px
x
600px,因为Puppeteer将此视口设置为初始页面尺寸,该尺寸定义了屏幕截图的尺寸。可以使用Page.setViewport()自定义页面大小。unsplash.png

让我们将视口更改为1920px x 1080px。在goto方法之前插入以下代码:

awaitpage.setViewport({width:1920,height:1080,deviceScaleFactor:1,})

现在,继续前进,也可以更改文件名以在像这样的方法:unsplash.png``unsplash2.png``screenshot

awaitpage.screenshot({path:'unsplash2.png'})

现在,整个文件应如下所示:screenshot.js

constpuppeteer=requireconstmain=async()=>{constbrowser=awaitpuppeteer.launch()constpage=awaitbrowser.newPage()awaitpage.setViewport({width:1920,height:1080,deviceScaleFactor:1,})awaitpage.goto('https://unsplash.com')awaitpage.screenshot({path:'unsplash2.png'})awaitbrowser.close

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

现在创建一个名为的文件,并将以下代码粘贴到其中:pdf.js

constpuppeteer=requireconstmain=async()=>{constbrowser=awaitpuppeteer.launch()constpage=awaitbrowser.newPage()awaitpage.goto('https://news.ycombinator.com',{waitUntil:'networkidle2'})awaitpage.pdf({path:'hn.pdf',format:'A4'})awaitbrowser.close

我们仅从screenshot代码中更改了两行。

首先,我们将网址替换为Hacker News,然后添加了networkidle2

awaitpage.goto('https://news.ycombinator.com',{waitUntil:'networkidle2'})

networkidle2对于进行长时间轮询或任何其他附带活动的页面非常有用,并且当至少两个网络连接持续至少500毫秒时,认为导航已完成。

然后,我们调用了pdf创建PDf的方法并将其调用,并将其格式化为大小:hn.pdf``A4

awaitpage.pdf({path:'hn.pdf',format:'A4'})

而已。现在,我们可以运行该文件来生成Hacker
News的PDF。让我们继续在终端中运行以下命令:

$nodepdf

这将在项目的根目录中生成A4大小的PDF文件。hn.pdf

3.使用Puppeteer登录到Facebook

使用以下代码创建一个名为的新文件:signin.js

constpuppeteer=requireconstSECRET_EMAIL='example@gmail.com'constSECRET_PASSWORD='secretpass123'constmain=async()=>{constbrowser=awaitpuppeteer.launchconstpage=awaitbrowser.newPage()awaitpage.goto('https://facebook.com',{waitUntil:'networkidle2'})awaitpage.waitForSelector('#login_form')awaitpage.type('input#email',SECRET_EMAIL)awaitpage.type('input#pass',SECRET_PASSWORD)awaitpage.click('#loginbutton')//awaitbrowser.close

我们创建了两个变量SECRET_EMAILSECRET_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和点击登录按钮。

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

$nodesignin

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

结论

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

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

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

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

相关文章