要点
Chrome 59 中推出了无头 Chrome。它是一种在无头环境中运行 Chrome 浏览器的方法。从本质上讲, 在没有 Chrome 的情况下运行 Chrome!它将 Chromium 和 Blink 渲染引擎提供的所有现代网络平台功能引入命令行。
这有何用处?
无头浏览器非常适合自动化测试和不需要可见界面 shell 的服务器环境。例如,您可能想要对真实网页运行一些测试、创建其 PDF 文件,或者仅检查浏览器渲染网址的方式。
启动无头 (CLI)
若要开始使用无头模式,最简单的方法是从命令行打开 Chrome 二进制文件。如果您已安装 Chrome 59 及更高版本,请使用 --headless
标记启动 Chrome:
chrome \
--headless \ # Runs Chrome in headless mode.
--disable-gpu \ # Temporarily needed if running on Windows.
--remote-debugging-port=9222 \
https://www.chromestatus.com # URL to open. Defaults to about:blank.
chrome
应指向您安装的 Chrome。确切位置因平台而异。因为我是 Mac 用户,所以我为已安装的每个 Chrome 版本
创建了方便的别名
如果您使用的是 Chrome 稳定版且无法获取 Beta 版,我们建议您使用 chrome-canary
:
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"
点击此处下载 Chrome Canary 版。
命令行功能
在某些情况下,您可能不需要以编程方式为 Headless Chrome 编写脚本。 要执行常见任务,请使用一些有用的命令行标志。
输出 DOM
--dump-dom
标志会将 document.body.innerHTML
输出到 stdout:
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
创建 PDF
--print-to-pdf
标志可创建网页的 PDF 文件:
chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
截取屏幕截图
如需截取网页的屏幕截图,请使用 --screenshot
标志:
chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/
# Size of a standard letterhead.
chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/
# Nexus 5x
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/
使用 --screenshot
运行将在当前工作目录中生成名为 screenshot.png
的文件。如果您要查找全屏屏幕截图,那就稍微复杂一些。David Schnurr 的一篇精彩博客
对大家进行了介绍请参阅使用无头 Chrome 作为自动截屏工具 。
REPL 模式(读取-求值-输出循环)
--repl
标志在一种模式下运行 Headless,您可以在浏览器中直接从命令行对 JS 表达式求值:
$ chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://www.chromestatus.com/
[0608/112805.245285:INFO:headless_shell.cc(278)] Type a Javascript expression to evaluate or "quit" to exit.
>>> location.href
{"result":{"type":"string","value":"https://www.chromestatus.com/features"}}
>>> quit
$
在没有浏览器界面的情况下调试 Chrome?
当您通过 --remote-debugging-port=9222
运行 Chrome 时,它会启动启用了 DevTools 协议的实例。该协议用于与 Chrome 通信并驱动无头浏览器实例。也是 Sublime、VS Code 和 Node 等工具用于远程调试应用的工具。#synergy
由于您没有查看该页面的浏览器界面,因此请在另一个浏览器中转到 http://localhost:9222
,以检查是否一切正常。您将看到一个可检查页面的列表,点击这些页面即可查看 Headless 渲染的内容:
在这里,您可以像往常一样使用熟悉的开发者工具功能检查、调试和调整页面。如果您以编程方式使用 Headless,也是一个强大的调试工具,可用于查看与浏览器通信的所有原始开发者工具协议命令。
以编程方式使用 (Node)
木偶操作师
Puppeteer 是由 Chrome 团队开发的 Node 库。它提供了一个用于控制无头(或完整)Chrome 的高级 API。它与 Phantom 和 NightmareJS 等其他自动化测试库类似,但仅适用于最新版本的 Chrome。
除此之外,Puppeteer 还可以用于轻松截取屏幕截图、创建 PDF 文件、浏览页面以及获取与这些页面相关的信息。如果您想快速自动执行浏览器测试,我推荐使用该库。它隐藏了开发者工具协议的复杂性,并可以处理多余的任务,例如启动 Chrome 的调试实例。
安装:
npm i --save puppeteer
示例 - 输出用户代理
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();
示例 - 截取页面的屏幕截图
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.chromestatus.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'page.pdf', format: 'A4'});
await browser.close();
})();
如需详细了解完整 API,请参阅 Puppeteer 的文档。
CRI 库
chrome-remote-interface 是低于 Puppeteer 的 API 的级别较低的库。如果您想更贴近核心并直接使用 DevTools 协议,我推荐您使用此选项。
正在启动 Chrome
chrome-remote-interface 不会为您启动 Chrome,因此您必须自行处理。
在 CLI 部分,我们使用 --headless --remote-debugging-port=9222
手动启动 Chrome。不过,要完全自动化测试,您可能需要从应用中生成 Chrome。
一种方式是使用 child_process
:
const execFile = require('child_process').execFile;
function launchHeadlessChrome(url, callback) {
// Assuming MacOSx.
const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';
execFile(CHROME, ['--headless', '--disable-gpu', '--remote-debugging-port=9222', url], callback);
}
launchHeadlessChrome('https://www.chromestatus.com', (err, stdout, stderr) => {
...
});
但是,如果您需要适用于多个平台的可移植解决方案,情况就会有些棘手。只需看一下 Chrome 的硬编码路径 :(
使用 ChromeLauncher
Lighthouse 是一款出色的工具,用于测试 Web 应用的质量。一个用于启动 Chrome 的强大模块是在 Lighthouse 中开发的,现在它提取出来供独立使用。chrome-launcher
NPM 模块将查找 Chrome 的安装位置、设置调试实例、启动浏览器,并在程序完成后终止它。最棒的是,得益于 Node,它可以跨平台运行!
默认情况下,chrome-launcher
将尝试启动 Chrome Canary 版(如果已安装),但您可以将其更改为手动选择要使用的 Chrome。如需使用它,请先从 npm 安装:
npm i --save chrome-launcher
示例 - 使用 chrome-launcher
启动 Headless
const chromeLauncher = require('chrome-launcher');
// Optional: set logging level of launcher to see its output.
// Install it using: npm i --save lighthouse-logger
// const log = require('lighthouse-logger');
// log.setLevel('info');
/**
* Launches a debugging instance of Chrome.
* @param {boolean=} headless True (default) launches Chrome in headless mode.
* False launches a full version of Chrome.
* @return {Promise<ChromeLauncher>}
*/
function launchChrome(headless=true) {
return chromeLauncher.launch({
// port: 9222, // Uncomment to force a specific port of your choice.
chromeFlags: [
'--window-size=412,732',
'--disable-gpu',
headless ? '--headless' : ''
]
});
}
launchChrome().then(chrome => {
console.log(`Chrome debuggable on port: ${chrome.port}`);
...
// chrome.kill();
});
运行此脚本不会执行太多操作,但您应该会在加载 about:blank
的任务管理器中看到 Chrome 的实例。请注意,该界面不会提供任何浏览器界面我们是无头人。
要控制浏览器,我们需要开发者工具协议!
检索有关网页的信息
我们来安装该库:
npm i --save chrome-remote-interface
示例
示例 - 输出用户代理
const CDP = require('chrome-remote-interface');
...
launchChrome().then(async chrome => {
const version = await CDP.Version({port: chrome.port});
console.log(version['User-Agent']);
});
结果大致如下:HeadlessChrome/60.0.3082.0
示例 - 检查网站是否有 Web 应用清单
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page} = protocol;
await Page.enable();
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const manifest = await Page.getAppManifest();
if (manifest.url) {
console.log('Manifest: ' + manifest.url);
console.log(manifest.data);
} else {
console.log('Site has no app manifest');
}
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
示例 - 使用 DOM API 提取页面的 <title>
。
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page, Runtime} = protocol;
await Promise.all([Page.enable(), Runtime.enable()]);
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const js = "document.querySelector('title').textContent";
// Evaluate the JS expression in the page.
const result = await Runtime.evaluate({expression: js});
console.log('Title of page: ' + result.result.value);
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
使用 Selenium、WebDriver 和 ChromeDriver
目前,Selenium 会打开 Chrome 的完整实例。换句话说,它是一个自动化解决方案,但不是完全无头的。不过,Selenium 可以配置为通过一些简单的工作来运行无头 Chrome。如果您想获得有关如何自行设置的完整说明,建议使用 Headless Chrome 运行 Selenium,但我在下面提供了一些示例来帮助您入门。
使用 ChromeDriver
ChromeDriver 2.32 使用 Chrome 61,并且能很好地与无头 Chrome 搭配使用。
安装:
npm i --save-dev selenium-webdriver chromedriver
例如:
const fs = require('fs');
const webdriver = require('selenium-webdriver');
const chromedriver = require('chromedriver');
const chromeCapabilities = webdriver.Capabilities.chrome();
chromeCapabilities.set('chromeOptions', {args: ['--headless']});
const driver = new webdriver.Builder()
.forBrowser('chrome')
.withCapabilities(chromeCapabilities)
.build();
// Navigate to google.com, enter a search.
driver.get('https://www.google.com/');
driver.findElement({name: 'q'}).sendKeys('webdriver');
driver.findElement({name: 'btnG'}).click();
driver.wait(webdriver.until.titleIs('webdriver - Google Search'), 1000);
// Take screenshot of results page. Save to disk.
driver.takeScreenshot().then(base64png => {
fs.writeFileSync('screenshot.png', new Buffer(base64png, 'base64'));
});
driver.quit();
使用 WebDriverIO
WebDriverIO 是基于 Selenium WebDriver 的更高级别 API。
安装:
npm i --save-dev webdriverio chromedriver
示例:在 chromestatus.com 上过滤 CSS 功能
const webdriverio = require('webdriverio');
const chromedriver = require('chromedriver');
const PORT = 9515;
chromedriver.start([
'--url-base=wd/hub',
`--port=${PORT}`,
'--verbose'
]);
(async () => {
const opts = {
port: PORT,
desiredCapabilities: {
browserName: 'chrome',
chromeOptions: {args: ['--headless']}
}
};
const browser = webdriverio.remote(opts).init();
await browser.url('https://www.chromestatus.com/features');
const title = await browser.getTitle();
console.log(`Title: ${title}`);
await browser.waitForText('.num-features', 3000);
let numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} total features`);
await browser.setValue('input[type="search"]', 'CSS');
console.log('Filtering features...');
await browser.pause(1000);
numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} CSS features`);
const buffer = await browser.saveScreenshot('screenshot.png');
console.log('Saved screenshot...');
chromedriver.stop();
browser.end();
})();
更多资源
以下是一些可帮助您上手的实用资源:
文档
- DevTools Protocol Viewer - API 参考文档
工具
- chrome-remote-interface - 封装开发者工具协议的节点模块
- Lighthouse - 用于测试 Web 应用质量的自动化工具;大量使用协议
- chrome-launcher - 用于启动 Chrome 的节点模块,已准备好实现自动化
样本歌曲
- “The Headless Web”- Paul Kinlan 撰写的精彩博文,介绍如何将 Headless 与 api.ai 搭配使用。
常见问题解答
我需要 --disable-gpu
标志吗?
仅适用于 Windows。其他平台不再需要。--disable-gpu
标志是一些 bug 的临时解决方法。在未来的 Chrome 版本中,您无需使用此标记。如需了解详情,请访问 crbug.com/737678。
所以我仍然需要 Xvfb?
不需要。无头 Chrome 不使用窗口,因此不再需要像 Xvfb 这样的显示服务器。您可以放心地在没有它的情况下运行自动化测试。
什么是 Xvfb?Xvfb 是一种内存中显示服务器,适用于类 Unix 系统。借助该服务器,您无需连接物理屏幕即可运行图形应用(如 Chrome)。很多人使用 Xvfb 运行早期版本的 Chrome 来进行“无头”测试。
如何创建运行 Headless Chrome 的 Docker 容器?
请查看 lighthouse-ci。它有一个使用 node:8-slim
作为基础映像的示例 Dockerfile,在 App Engine 柔性环境上安装并运行 Lighthouse。
我可以将该功能与 Selenium / WebDriver / ChromeDriver 结合使用吗?
是。请参阅使用 Selenium、WebDriver 和 ChromeDriver。
这与 PhantomJS 有什么关系?
无头 Chrome 与 PhantomJS 等工具类似。两者都可用于无头环境中的自动化测试。两者之间的主要区别在于,Pantom 使用旧版 WebKit 作为其渲染引擎,而 Headless Chrome 使用最新版 Blink。
目前,Pantom 提供的 API 级别高于 DevTools 协议。
在哪里报告 bug?
对于与无头 Chrome 相关的错误,请在 crbug.com 上提交。
对于开发者工具协议中的错误,请在 github.com/ChromeDevTools/devtools-protocol 报告错误。