初探 Headless Chrome

什么是 Headless Chrome

Headless Chrome 是 Chrome 浏览器的无界面形态,可以在不打开浏览器的前提下,使用所有 Chrome 支持的特性运行你的程序。相比于现代浏览器,Headless Chrome 更加方便测试 web 应用,获得网站的截图,做爬虫抓取信息等。相比于出道较早的 PhantomJS,SlimerJS 等,Headless Chrome 则更加贴近浏览器环境。

如何获取 Headless Chrome

目前,Mac 上 Chrome 59 beta 版本与 Linux 上的 Chrome 57+ 已经开始支持 headless 特性。Windows 上 Chrome 暂时不支持,可以使用 Chrome Canary 60 进行开发。

如何在终端中使用

在Mac上使用前,建议先绑定 Chrome 的别名

Linux下无需绑定别名,从官网上下载最新版 Chrome 之后直接运行以下命令即可。

然后,在终端中输入:

增加 –disable-gpu 主要是为了屏蔽现阶段可能触发的错误。

此时,Headless Chrome已经成功运行了。打开浏览器,输入 http://localhost:9222,你会看到如下的界面:

在终端中,我们还可以做以下操作:

获取屏幕截图:

获取页面为PDF:

打印页面DOM:

远程控制

在上文中讲述的都使用终端命令启动 Headless Chrome,下文以获取截图为例,尝试如何在程序里控制 Headless Chrome。

安装依赖

实现截图的大体思路为:通过使用 lighthouse 启动 Headless Chrome,然后通过 chrome-remote-interface 远程控制浏览器,使用 Page 监控页面的加载,使用 Emulation 模块调整视口缩放,最终生成一张截图。

这里使用 lighthouse 提供的 ChromeLauncher 模块来调用 Chrome,如果电脑上安装了Chrome Canary,lighthouse 默认会启动 Chrome Canary,可以将 autoSelectChrome 设置为false 然后自行选择使用什么版本。

通过 chrome-remote-interface 配合 Headless Chrome,我们还可以做更多事情。

使用 CSS 和 DOM 模块,可以获取和设置页面中的 DOM 节点内容和 CSS 样式。

使用 Runtime 模块,可以在页面运行时执行 JS 脚本。

使用 Network 模块,可以读取并设置 UserAgent 和 Cookie 等信息。

在 Karma 中使用 Headless Chrome 进行单元测试

相比于 PhantomJS 等,使用 Headless Chrome 做单元测试更加贴近浏览器开发环境。同时 PhantomJS 作者也已经功成身退,在 Chrome 发布 Headless 模式后,发布通知不再维护 PhantomJS 项目。

安装依赖

配置 Karma

编写测试用例

配置npm script

在终端中运行

结果

从返回结果中可以看出,测试已运行在 Headless Chrome 环境下。

小结

本文简单介绍了一下 Headless Chrome 在终端的用法,以及如何使用 Headless Chrome 获取截图、获取页面中的CSS和DOM、设置UA和Cookie、运行JS脚本、配合 Karma 进行单元测试。接下来,就等着你探索更多关于 Headless Chrome 的用法了…

参考:

developers.google.com/w
How to install and use Headless Chrome on OSX

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部