前言

突然想起 N 个月前恒温大佬建议我写篇关于有头浏览 docker 镜像的文章，到今天为止大概半年没有写文章，从去年换工作开始感觉自己一直在休整，毕竟环境不一样，很多东西都要去适应，同时自己投入了半年的时间去开发一个测试平台，加上业务工作，时间真的比以前少了，但经过这半年以来还是有所积累的，起码自己的开发水平个人感觉提高了，尤其是前端开发的能力，同时体系化地思考事情这门技巧好像还是学会了点，好了，不废话了，今天说说 Docker 里面的有头浏览器

开篇

首先我们先了解什么是有头浏览器和无头浏览器的区别，有头的话不用怎么说了，就是我们平时使用的浏览器，能看到图形化界面，和用户有深度的交互，那无头浏览器即 headless browser，是一种没有界面的浏览器。既然是浏览器那么浏览器该有的东西它都应该有，只是看不到界面，省去可视化，也就是说去除了用户交互的部分，那这样对于浏览器来说是提高了浏览器整体运行的效率，也提高自动化的兼容性稳定性，目前行业最流行的无头浏览器分别是 Puppeteer 和 PhantomJS，但后者已经不再维护了
说到这里大家也可能已经理解到现在大部分的在 docker 部署的浏览器都是无头的吧，因为 docker 本身就是不提供用户界面的，所以一般制作浏览器镜像都会优先考虑无头浏览器
但是，用过 docker 无头浏览器的小伙伴应该都会遇到一个问题，就是在测试浏览器外的交互，比如上传文件，这类型的用例基本是不可能实现的，所以无头浏览器 docker 环境作为自动化测试的一个载体存在一定的局限性，但是有局限也就有突破的方法，接下来就是讲解一下在 docker 里面我们是怎么使用有头浏览器来做自动化测试
从上面的一些问题我们能因引出测试需求，那就是解决如何在 docker 上做浏览器测试使其达到的效果和在我们平常使用的桌面环境上深度交互的运行效果，先直接一点，我们看看最后的效果

看到这个，大家应该也毕竟熟悉了，其实就是 Docker 的 NoVnc 的镜像，图形界面化 docker 环境，用浏览器直接打开就可以看到桌面，还可以直接操作，与一个普通界面操作系统基本无差，估计看到这里大家百度一下论坛搜一下都可以马上去用了，直接下个 novnc 镜像装个 macaca selenium 什么就跑一下脚本就能运行起来，很简单
但是，知其然，也要知其所以然，那接下来就和大家说一下这个能够运行有头浏览器的 docker 环境的一些技术栈以及它的构建过程

技术栈

对于浏览器的那些 driver 和 docker 本身就不多说了，这次主要分享支持起浏览器可以在图形界面化的 docker 中运行的技术栈，其中主要的几个模块和组件：Xvfb，VNC，noVNC

Xvfb

Xvfb 是 X virtual framebuffer 的简写，顾名思义，它最大的作用是可以代替完整的 X server 的功能，简单地说就是可以用虚拟的方式来模拟程序在有图形界面条件下运行的情况，大家现在用的大部分 docker 无头浏览器就是用到它，Xvfb 也是最重要的模块，没有这个模块的支撑的话我这篇文章可以不用写了
我们在做自动化测试的时候有一定的场景可以不用关注浏览器的整个运行过程，大部分时候都是执行等结果出报告就好，所以在做这种场景的测试的话可以先运行 xfvb，接着就按照平时自动化测试的流程去执行
对于 docker 本身要去安装这个模块的，以 ubuntu 镜像环境为例，首先安装 Xvfb

sudo apt-get install Xvfb

安装完以后运行

Xvfb :99 -ac 2>/dev/null &
export DISPLAY=:99

验证是否启动成功，看看启动 firefox 的时候输出的日志正不正常就 OK 了 shell >>firefox
对于 dockerfile 方面也可以参考一下

FROM macaca-electron
EXPOSE 3456 22
ENTRYPOINT Xvfb -ac -screen scrn 1280x2000x24 :9.0 & \
       export DISPLAY=:9.0 \
       macaca server \    
          /usr/sbin/sshd -D

其中 macaca-electron 是自制的一个已经安装好 Xvfb 和 macaca 相关驱动的镜像，这里举例子，下面是没启动 Xvfb 时启动 macaca 执行自动化测试的情况
这里就直接报找不到 Xvfb 了，除了 macaca 大家也可以试试 selenium，基本是一样的错误
那启动之后的我们也试一下

运行正常，同时我看看报告的截图，也是能正常显示的

这就是目前浏览器 docker 环境用无头方式做自动化测试的一个案例，主要就是 Xvfb 的支撑

VNC

VNC 是 Virtual Network Console（虚拟网络控制台）控制台的缩写，是业界优秀的远程桌面控制组件（工具），主要分为 vncviewer 和 vncserver 两个模块，其中 VNC 的原理也简单讲解一下

上图是 VNC 的运行原理图，从一些参考资料解析，其控制是基于 tcp/ip 实现的，其中 vnc server 扮演了双重角色，vnc protocal 是基于 RFB protocal 的实现，其传输方式包括 RFB 协议传输和 X 协议传输，自己理解后简单总结为 X 协议就是 VNC 用来获取 X 服务的信息（前文提前 X 服务信息可以用 Xvfb 模拟），然后经过 RFB 协议进行缩放等一系列操作投放到本地 vncviewer 中显示，也是就是上图的说明，这项实现我在去年写的附录一就利用过这项目技术来实现可视化的 docker 浏览器执行自动化测试

对于 vnc 的部署安装可以参考附录二，或者直接使用现成的 docker 镜像，用docker search vnc可以搜出来，比如dorowu/ubuntu-desktop-lxde-vnc，然后在里面部署相关组件就可以用起来了
但是，只是通过 VNC 来进行自动化测试，是没办法模拟键盘和鼠标等一些操作，同时一些浏览器外的交互就实现不了，最明显的就是上传文件，那如果要解决这种场景，那基本上环境那块就要把浏览器外的环境也一起模拟进来，那就是接下来要讲的用 noVNC 的方式来解决这个问题

noVNC

VNC 本身需是自己的客户端来显示获取到的图像信息的，如果要在 Web 页面上显示，就可以利用到 noVNC
noVNC 是一个 HTML5 VNC 客户端，采用 HTML 5 WebSockets, Canvas 和 JavaScript 实现，noVNC 被普遍用在各大云计算、虚拟机控制面板中
noVNC 采用 WebSockets 实现，但是目前大多数 VNC 服务器都不支持 WebSockets，所以 noVNC 是不能直接连接 VNC 服务器的，需要一个代理来做 WebSockets 和 TCP sockets 之间的转换。这个代理在 noVNC 的目录里，叫做 Websockify
最后实现的效果就是本文的第一张图片的运行情况，直接利用浏览器可以操作一个 linux 操作系统，然后其实就相当于一台现成的虚拟机，但在资源利用效率上就相对高效，部署文档可以参考附录三
整套流程如下图

这里也演示一下直接操作使用的效果，基本上和平时使用的虚拟机无异，而且是用浏览器打开的，不需本地部署

应用实践

说完原理那就说一下应用，目前这项技术就应用在自己前段时间研发的 UI 自动化测试平台上，这里也演示给大家看看

就是通过 noVNC 实现和自动化测试平台的一个互通，同时节点会保持发送心跳到平台更新状态，当执行自动化测试的时候如下图

通过双向通信获取到节点的状态，这里是在任务调度这块逻辑用到的，尤其是多个项目执行自动化测试，但节点又不够的情况下就可以合理调度，就不会想 selenium-grid 那样不可控，可以需要的时候还可以去节点环境中看看执行情况，这就是 Docker 有头浏览器的一个应用，也顺带附送目前在项目应用的节点情况

目前用了 4 个节点对接业务中的项目使用，对于这里的 UI 自动化平台的实现，那是其他话题了，有几乎在聊聊

总结

用 Docker 的有头浏览器确实能够让我们可以很好的更贴近实际情况去实现自动化测试，当然任何方案都不是完美的，我们需要做的是针对业务上遇到的问题去设计方案解决
这次的编写原因除了前文提到的，还有是这 1 个来月大家都在面评或面试，过程中大家都做了很多，也实践了很多，但对与原理上的深入分析和对业务提供的价值这一块是面评和面试的一大重点，还是那句知其然，也要知其所以然，踏踏实实地学好每一项需要用到的知识或技术，有助于你站得更高地思考，看到更远的价值,框架或工具不是会用了就算懂,要理解,要用出价值,那才算懂,说到底还是要踏实
PS：前文提到的自动化测试平台，由于公司的原因，估计要开源或拿出来分享难度比较大，但可以有空讨论讨论，一些不涉及敏感内容的知识和技术都可以聊聊，谢谢大家支持哈

附录

↙↙↙阅读原文可查看相关链接，并与作者交流