Headless 提供一种无 GUI 的纯浏览器环境,也就是说它有一个完整的浏览器内核,包括js解析引擎,渲染引擎,请求处理等,但是不包括显示和用户交互页面的浏览器。这对于 Web 应用和网页的自动化测试非常有用。
浏览器的Headless模式让开发者可以通过命令行或是API操作,通常可以用于以下场景:
无需浏览器的Web测试:在无需浏览器的情况下进行快速的Web测试,希望自动登录网站并做一些后续操作,然后检查结果是否正常。
页面自动化操作:使用标准的DOM API或一些JavaScript框架(如jQuery)访问和操作Web页面。
屏幕捕获:以编程方式抓起CSS、SVG和Canvas等页面内容,即可实现网络爬虫应用。构建服务端Web图形应用,如截图服务、矢量光栅图应用。
网络监控:自动进行网络性能监控、跟踪页面加载情况以及将相关监控的信息以标准的HAR格式导出。
Headless Chrome 已经在 Chrome 59 中发布。目前,Chrome Canary 是唯一包含 Chrome 59 的渠道。也就是说如果现在你想要尝鲜,体验一下 Headless Chrome,就需要安装 Chrome Canary。将来 Chrome 的开发团队会把 Chrome 59 放到正式的 Chrome 发布版本中,就不需要再安装 Chrome Canary 了。
启动headless Chrome:
$ chrome --headless --remote-debugging-port=9222 https://chromium.org
结合nods.js,用Headless Chrome 抓取数据。使用Node.js中的chrome-remote-interface 包抽取页面的DOM:
const CDP = require('chrome-remote-interface');
CDP((client) => {
// Extract used DevTools domains.
const {Page, Runtime} = client;
// Enable events on domains we are interested in.
Promise.all([
Page.enable()
]).then(() => {
return Page.navigate({url: 'https://example.com'});
});
// Evaluate outerHTML after page has loaded.
Page.loadEventFired(() => {
Runtime.evaluate({expression: 'document.body.outerHTML'}).then((result) => {
console.log(result.result.value);
client.close();
});
});
}).on('error', (err) => {
console.error('Cannot connect to browser:', err);
});
获知Chrome Headless模式的最新消息后,PhantomJS 最主要的贡献者也是目前仅有的开发者Vitaly Slobodin 决定退出Phantom的开发。
本文对你有帮助?欢迎扫码加入前端学习小组微信群: