使用 Puppeteer 揭示 Headless 浏览器的强大功能

作为一名 Web 开发人员，我每天有半天时间在浏览器上。

浏览器对我来说总是我能看到的东西，包括所有布局、表单、开发人员工具等。当我了解Headless 浏览器时，我开始深入研究它。事实证明，这是一件如此强大的事情，以至于我这些年来都没有意识到。它让我如此着迷，以至于它把我带到这里做一些写作。但在继续之前，让我们知道什么是无头浏览器；

无头浏览器是一种没有图形用户界面的网络浏览器。它在类似于流行的 Web 浏览器的环境中提供对网页的自动控制，但通过命令行界面执行。

简单地说，它只是意味着没有图形用户界面（GUI）。但是没有 GUI 的浏览器有什么意义呢？开始了！

我们可以使用许多不同的工具来揭示无头浏览器的强大功能，但我在这里使用Puppeteer。

使用 Puppeteer，我们将截取Web 浏览器的屏幕截图，生成网页的PDF并自动自动提交表单。但究竟什么是 Puppeteer？

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。Puppeteer 默认无头运行，但可以配置为运行完整（非无头）Chrome 或 Chromium。

TLDR；
让我们从设置 headless chrome 和 puppeteer 开始，假设您的设备中已经设置了节点环境。

mkdir puppeteer-project 
cd puppeteer-project 
yarn 
yarn add puppeteer

好的，现在我们都已设置和配置完毕，让我们开始对网站进行截图！puppeteer-project使用以下代码在目录内创建一个 index.js 文件

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://facebook.com');
  await page.screenshot({path: 'facebook.png'});
  console.log('Screenshot saved!');
await browser.close();
})();

有浏览器窗口的截图，但你可能认为它被裁剪了？我打赌你做到了。您可以在 puppeteer 中设置视点，如下所示：

page.setViewport({width: 2000, height: 2000});

为同一页面生成 pdf 怎么样，没什么大不了的。我们将使用浏览器的pdf方法来执行它。因此，现在我们将使用该方法index.js而不是screenshot使用该pdf方法，如下所示：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://facebook.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'facebook.pdf', format: 'A4'});
await browser.close();
})();

再次运行该文件以查看我们文件夹中的 facebook.pdf。我puppeteer在搜索软件包或工具以从网络下载内容的 pdf 格式时发现我们为 Hackathon 制作的应用程序 ( Mero Resume )。

最后，自动化表单提交。由于我们正在与 facebook.com 合作，让我们尝试无头登录 facebook。

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const email = '[email protected]'
await page.setViewport({ width: 2000, height: 2000});
await page.goto('https://www.facebook.com', { waitUntil: 'networkidle2' });
await page.type('#email', email)
await page.type('#pass', '*********') // enter your password here
await page.click('input[type="submit"]');
await page.waitForNavigation({ waitUntil: 'domcontentloaded' });
page.screenshot({ path: 'loggedIn.png' });
})();

检查loggedIn.png以查看您登录的主页。像这样，我们可以自动化任何表单提交。我主要使用它，而我必须经常注册新用户以进行测试。您可以以任何其他形式尝试此操作，如果您想查看幕后发生的事情，您可以在如下所示的浏览器窗口中启动 puppeteer：

const browser = await puppeteer.launch(({ headless: false }));

这些是我们可以用 Puppeteer 做的一些事情，你可以发现更多很酷的东西，不要忘记还有许多其他工具和框架来自动化浏览器，比如 Selenium，它支持 Chrome 以外的浏览器。如果您还没有尝试，请尝试一下。:)

文章来源：Unraveling the power of Headless browser with Puppeteer