Chrome Headless模式(一)

前言：

最近在做webUI的自动化，当本地执行脚本时，会启动浏览器的UI界面，导致其他工作无法进行。并且当电脑锁屏时，chromer driver 会退出，无法继续执行。查网上的资料，headerless Browser模式可以在后台运行浏览器。

1、Headerless Browser是什么鬼？

Headerless Browser（无头的浏览器）是浏览器的无界面状态，可以在不打开浏览器GUI的情况下，使用浏览器支持的性能。

Chrome Headless相比于其他的浏览器，可以更便捷的运行web自动化，编写爬虫、截图等。通常是由编程或者命令行来控制的。

好处： 

    可以加快UI自动化测试的执行时间，对于UI自动化测试，少了真实浏览器加载css，js以及渲染页面的工作。无头测试要比真实浏览器快的多。

    可以在无界面的服务器或CI上运行测试，减少了外界的干扰，使自动化测试更稳定。

2、命令行模式运行

我本地的环境：

• 系统：mac
• chrome浏览器版本：

命令行启动chrome：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --remote-debugging-port=9222 https://www.baidu.com

参数说明：

• --headless：无头模式，就是无界面模式运行
• --remote-debugging-port：开启远程调试，端口9222和我们之前转发出来的端口一致
• --user-data-dir：设置独立的文件保存目录，建议一个网站一个目录
• --crash-dumps-dir：设置的crash文件保存目录

　　如果没有指定crash-dumps-dir可能会报错。

　　ERROR:xattr.cc(64)] setxattr org.chromium.crashpad.database.initialized on file /var/folders/gx/1m0t1z_d03dg4pjhv7bwwt_c0000gp/T/: Operation not permitted (1)

加上crash-dumps-dir参数，命令如下：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --headless --crash-dumps-dir=/Users/work/baidu http://www.baidu.com/

 验证是否成功开启headless chrome 的服务：

　　随意打开一个浏览器窗口，输入http://localhost:9222，如果看到如下效果，就说明成功开启。

      

3、连接远程端口

如果是本机调试，直接打开：http://localhost:9222/json，效果如下图所示：

 

 打开http://localhost:9222/json可以看到有一个devtoolsFrontendUrl，那就是开发者工具的前端地址，就是一个html应用，url里面传过去WebSocket调试地址。打开这个地址就可以看到熟悉的开发者工具了！注意：这个窗口调试的是远程chrome上的页面。

其他的一些已知接口：

• http://127.0.0.1:9222/json ：查看已经打开的Tab列表
• http://127.0.0.1:9222/json/version : 查看浏览器版本信息
• http://127.0.0.1:9222/json/new?http://www.baidu.com : 新开Tab打开指定地址

4、截图

截图命令：--screenshot命令

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  --headless --crash-dumps-dir=/Users/work/baidu --screenshot http://www.baidu.com/

使用--screenshot命令会在当前工作目录中保存截图为screenshot.png