node.js快速入门_快速提示：Node.js中的无头Chrome入门

node.js快速入门

通常，在我们的工作范围中，我们需要能够重复复制用户旅程，以确保我们在更改网站时页面能够提供一致的体验。 能够始终如一地方便地完成此任务的关键是允许我们编写这些类型的测试脚本的库，以便我们可以针对它们运行断言并维护有关结果的文档。 输入无头浏览器：命令行工具，使您能够以编程方式编写用户跨站点交互的脚本，并捕获要在测试中使用的结果。

多年来，我们许多人一直在使用PhantomJS ， CasperJS和其他工具来做到这一点。 但是，就像爱一样，我们的心可以被遗赠给另一个人。 从Chrome 59（对于Windows用户为60）开始，Chrome附带了自己的无头浏览器。 而且，尽管它目前不提供对Selenium的支持，但它使用了Chromium和Blink引擎，即它正在模拟Chrome中的实际用户体验。

与以往一样，可以在我们的GitHub repo上找到本文的代码。

从命令行运行无头Chrome

从命令行运行Headless Chrome相对容易。 在Mac上，您可以为Chrome设置别名并使用—headless命令行参数运行

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome”
chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

在Linux上，它甚至更容易：

google-chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

• --headless ：在没有UI或显示服务器依赖性的情况下运行
• --disable-gpu ：禁用GPU硬件加速。 现在暂时需要此功能。
• --remote-debugging-port ：在指定端口上通过HTTP启用远程调试。

您还可以与请求的页面进行交互，例如将document.body.innerHTML打印到标准输出，您可以执行以下操作：

google-chrome --headless --disable-gpu --dump-dom http://endless.horse/

如果您想知道还有什么可能， 可以在这里找到完整的参数列表 。

在Node.js中运行无头Chrome

但是，本文的重点不是命令行，而是在Node.js中运行Headless Chrome。 为此，我们将需要以下模块：

• chrome-remote-interface ：JavaScript API提供了命令和通知的简单抽象。
• chrome-launcher ：这使我们能够跨多个平台从Node内启动Chrome。

然后我们可以设置环境。 这假定您在计算机上安装了Node和npm。 如果不是这种情况， 请在此处查看我们的教程 。

mkdir headless
cd headless
npm init -y
npm install chrome-remote-interface --save
npm install chrome-launcher --save

之后，我们想使用无头Chrome实例化会话。 首先，在项目文件夹中创建一个index.js文件：

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--disable-gpu',
        '--headless'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  // ALL FOLLOWING CODE SNIPPETS HERE

})();

首先，我们需要依赖项，然后创建一个自调用函数，该函数将实例化Chrome会话。 请注意，在撰写本文时， --disable-gpu标志是必需的，但在您阅读此文件时可能不需要--disable-gpu标志，因为这仅是一种解决方法（如Google推荐） 。 我们将使用async / await来确保我们的应用程序在执行下一系列步骤之前等待无头浏览器启动。

旁注 ：我们将使用在执行后续步骤之前需要完成操作的功能。 这样可以在继续之前有时间渲染页面，执行交互等。 其中许多步骤都是非阻塞的，因此我们需要依靠承诺来暂停执行。 可以在Mozilla开发人员网络上或SitePoint上找到有关异步功能的更多信息 。

接下来，我们需要公开测试所需的域：

const {
  DOM,
  Page,
  Emulation,
  Runtime
} = protocol;
await Promise.all([Page.enable(), Runtime.enable(), DOM.enable()]);

这里最重要的是Page对象-我们将使用它来访问呈现到UI的内容。 这也是我们指定要导航到的位置，与之交互的元素以及运行脚本的位置。

浏览页面

一旦我们初始化了会话并定义了域，就可以开始浏览该站点。 我们想选择一个起点，因此我们使用上面启用的Page域导航到：

Page.navigate({
  url: 'https://en.wikipedia.org/wiki/SitePoint'
});

这将加载页面。 然后，我们可以使用loadEventFired方法定义要运行应用程序的步骤，以执行代码来复制用户旅程。 在此示例中，我们将抓取第一段的内容：

Page.loadEventFired(async() => {
  const script1 = "document.querySelector('p').textContent"
  // Evaluate script1
  const result = await Runtime.evaluate({
    expression: script1
  });
  console.log(result.result.value);

  protocol.close();
  chrome.kill(); 
});

如果使用node index.js运行脚本，则应该看到接近以下输出的内容：

SitePoint is a Melbourne, Australia-based website, and publisher of books, courses and articles for web developers. In January 2014, SitePoint.com had an Alexa ranking of 889,[1] and a Quantcast rating of 14,934.[2]

更进一步—抓取屏幕截图

很好，但是我们可以轻松地将任何代码替换为该script1值，以单击链接，填写表单字段并使用查询选择器运行一系列交互。 每个步骤都可以存储在JSON配置文件中，并加载到您的Node脚本中以按顺序执行。 可以使用诸如Mocha之类的测试平台来验证这些脚本的结果，从而使您可以交叉引用所捕获的值满足UI / UX要求。

作为测试脚本的补充，您可能希望在浏览站点时捕获页面的屏幕截图。 幸运的是，所提供的域具有一个可以执行此操作的captureScreenshot函数。

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const file = require('fs');

(async function() {
  ...

  Page.loadEventFired(async() => {
    const script1 = "document.querySelector('p').textContent"
    // Evaluate script1
    const result = await Runtime.evaluate({
      expression: script1
    });
    console.log(result.result.value);

    const ss = await Page.captureScreenshot({format: 'png', fromSurface: true});
    file.writeFile('screenshot.png', ss.data, 'base64', function(err) {
      if (err) {
        console.log(err);
      }
    });

    protocol.close();
    chrome.kill();
  });
})();

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

fromSurface标志是在撰写本文时跨平台支持所必需的另一个标志，以后的迭代中可能不需要。

使用node index.js运行脚本，您应该看到类似于以下的输出：

结论

如果您要编写自动化脚本，则应该立即开始使用Chrome的无头浏览器。 尽管它仍未与Selenium等工具完全集成，但不应低估模拟Chrome渲染引擎的好处。 这是以完全自动化的方式重新创建用户体验的最佳方法。

我将给您进一步阅读：

• API文档： https ： //chromedevtools.github.io/devtools-protocol/
• 无头Chrome入门： https ： //developers.google.com/web/updates/2017/04/headless-chrome

在下面的评论中，让我知道您使用Headless Chrome的经历。

翻译自: https://www.sitepoint.com/headless-chrome-node-js/

node.js快速入门