前言:
最近在做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