Firefox 无头模式的使用

如果您熟悉相关知识,那么好消息来了!Firefox 现在支持无头模式,这使得它更易于作为自动化工具的后端使用。您可以 直接跳转 学习如何使用它。

浏览器自动化并不是一个新概念,但它正成为现代网站构建、测试和部署的重要组成部分。自动化设置从本地机器上运行的脚本到云端运行的大量专门服务器部署不等。为此,浏览器长期以来一直支持一定程度的自动化控制,通常通过第三方驱动程序软件实现。

浏览器本质上是网络的用户界面,特别是图形用户界面。这对自动化带来了一些问题。在某些环境中,可能没有可用的图形显示,或者可能希望在控制浏览器时不显示它。这需要使用诸如 虚拟显示软件 之类的工具才能正常运行,增加了复杂性。最近,诸如 Lighthouse 之类的工具将复杂的自动化测试打包成一个简单且吸引人的软件包。它们使用浏览器作为测试运行时,但无需在测试运行时显示浏览器窗口。

多年来,加载网页而不显示 UI 的最佳方法是 PhantomJS,它基于 WebKit。虽然它仍然是一个很棒的工具,但能够在官方浏览器中运行自动化的浏览器测试也很重要,因此拥有无头模式非常有用。

6 月,Google 发布了包含无头模式的 Chrome 59,而 Firefox 紧随其后,从 56 版本开始,在所有平台上都提供无头模式。

在无头模式下使用 Firefox

在无头模式下启动 Firefox 非常简单。在命令行中,只需添加 -headless 参数

/path/to/firefox -headless

太棒了!Firefox 正在无头模式下运行。如何控制它呢?

没错。

有许多选项可供选择,其中许多选项实际上早于无头模式本身。让我们回顾一下!

Selenium/WebDriver

关于 selenium-webdriver 测试的丰富信息可以在 MDN 无头模式页面 上找到。下面是一个高级概述。

Selenium 是一个用于浏览器自动化的久负盛名的工具,它在无头浏览器中更加强大。编写无头测试与以前一样,而且有一些很棒的库可以使它更容易。例如,以下是一个基本的节点脚本,用于截取网页的屏幕截图

const { Builder } = require('selenium-webdriver');
const firefox = require('selenium-webdriver/firefox');
const fs = require('fs');

require('geckodriver');

async function capture(url) {
  const binary = new firefox.Binary(firefox.Channel.RELEASE);
  binary.addArguments('-headless'); // until newer webdriver ships

  const options = new firefox.Options();
  options.setBinary(binary);
  // options.headless(); once newer webdriver ships

  const driver = new Builder().forBrowser('firefox')
    .setFirefoxOptions(options).build();

  await driver.get(url);
  const data = await driver.takeScreenshot();
  fs.writeFileSync('./screenshot.png', data, 'base64');

  driver.quit();
}

capture('https://hacks.mozilla.ac.cn/');

使用无头模式时,唯一真正的区别是确保传递了正确的参数。

也就是说,如果您只需要截取网页的屏幕截图,那么该功能是内置的

# -screenshot assumes -headless
firefox -screenshot https://hacks.mozilla.ac.cn/

# want to pick the resolution?
firefox -screenshot https://hacks.mozilla.ac.cn/ --window-size=480,1000

DevTools 调试协议

Firefox 有一个 调试协议,允许脚本从远程驱动其 DevTools。有一些库,例如 node-firefoxfoxdriver,它们使用此协议来远程调试网站,获取其日志等等。出于安全原因,远程调试协议默认情况下未启用,但可以在首选项中或从命令行启用

/path/to/firefox --start-debugger-server 6000 -headless

此外,远程调试协议还支持 WebSockets!您可以将网页连接到远程 Firefox 并从那里驱动它

/path/to/firefox --start-debugger-server ws:6000 -headless

了解更多信息!

这是关于无头 Firefox 的可能性概述,它处于支持的早期阶段,但已经有很多很棒的信息。尤其是

祝您脚本编写愉快!


5 条评论

  1. GP

    是否计划支持 Chrome 的远程调试协议?Firefox 在 RemoteDebug 的兼容性表中也没有出现。

    2017 年 12 月 5 日 下午 6:52

  2. Rick

    我想知道您是否知道我们可能在使用无头模式时遇到的问题。

    如果您想在 FireFox 中执行类似 WebRTC 屏幕录制的操作,您每次都需要授予权限。在无头模式下,是否有办法完全禁用此安全检查,而无需查看它并单击“记住”按钮?假设这与网络摄像头/麦克风访问权限的工作方式相同。

    2017 年 12 月 6 日 上午 1:01

    1. Philipp Hancke

      Rick:将 media.navigator.permission.disabled 设置为 true 允许屏幕共享,无需提示。与 selenium 结合使用效果很好。

      2017 年 12 月 7 日 上午 1:04

  3. Patrick

    嗨,

    无头 Firefox 看起来棒极了。

    有没有办法使背景透明?

    我正在尝试将 SVG 转换为 PNG,其中有一些区域是透明的,但当前的屏幕截图功能基于白色背景。

    2017 年 12 月 6 日 上午 2:51

  4. Muhammad

    如果在屏幕截图中包含一个延迟选项/参数会很好。
    例如 –delay Xms

    2017 年 12 月 7 日 上午 9:12

本文的评论已关闭。