如果您熟悉相关知识,那么好消息来了!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-firefox 和 foxdriver,它们使用此协议来远程调试网站,获取其日志等等。出于安全原因,远程调试协议默认情况下未启用,但可以在首选项中或从命令行启用
/path/to/firefox --start-debugger-server 6000 -headless
此外,远程调试协议还支持 WebSockets!您可以将网页连接到远程 Firefox 并从那里驱动它
/path/to/firefox --start-debugger-server ws:6000 -headless
了解更多信息!
这是关于无头 Firefox 的可能性概述,它处于支持的早期阶段,但已经有很多很棒的信息。尤其是
- Brendan Dahl(负责 Firefox 的无头模式 - 感谢 Brendan!)在 使用无头 Firefox 替换 PhantomJS 上发表了一篇博文
- Myk Melez 发表了一篇更深入的文章,介绍了 使用 selenium-webdriver 控制 Firefox
- 如果您正在寻找生产级无头代码示例,我编写了一个名为 FoxShot 的简单命令行工具,以便更容易地从 Firefox 抓取大量屏幕截图。
祝您脚本编写愉快!
5 条评论