使用可视化docker浏览器，轻松实现分布式web自动化

01、前言

顺着docker的发展，很多测试的同学也已经在测试工作上使用docker作为环境基础去进行一些自动化测试，这篇文章主要讲述我们在docker中使用浏览器进行自动化测试如果可以实现可视化，同时可以对浏览器进行相关的操作。

02、开篇

首先我们先了解什么是有头浏览器和无头浏览器的区别，有头的话不用怎么说了，就是我们平时使用的浏览器，能看到图形化界面，和用户有深度的交互，那无头浏览器即headless browser，是一种没有界面的浏览器。

既然是浏览器那么浏览器该有的东西它都应该有，只是看不到界面，省去可视化，也就是说去除了用户交互的部分，那这样对于浏览器来说是提高了浏览器整体运行的效率，提高自动化的兼容性稳定性，目前行业最流行的无头浏览器分别是Puppeteer和PhantomJS，但后者已经不再维护了。

说到这里大家也可能已经理解到现在大部分的在docker部署的浏览器都是无头的，因为docker本身就是不提供用户界面的，所以一般制作浏览器镜像都会优先考虑无头浏览器

但是，用过docker无头浏览器的小伙伴应该都会遇到一个问题，就是在测试浏览器外的交互，比如上传文件，这类型的用例基本是不可能实现的，所以无头浏览器docker环境作为自动化测试的一个载体存在一定的局限性，但是有局限也就有突破的方法，接下来就是讲解一下在docker里面我们是怎么使用有头浏览器来做自动化测试

从上面的一些问题我们能引出测试需求，那就是解决如何在docker上做浏览器测试使其达到的效果和在我们平常使用的桌面环境上深度交互的运行效果，我们看看最后的效果
在这里插入图片描述

看到这个，大家应该也毕竟熟悉了，其实就是Docker的NoVnc的镜像，图形界面化docker环境，用浏览器直接打开就可以看到桌面，还可以直接操作，与一个普通界面操作系统基本无差，估计看到这里大家百度一下论坛搜一下都可以马上去用了，直接下个novnc镜像装个macaca selenium什么就跑一下脚本就能运行起来，很简单。

但是，知其然，也要知其所以然，那接下来就和大家说一下这个能够运行有头浏览器的docker环境的一些技术栈以及它的构建过程

03、技术栈

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

01、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了

>>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的支撑

02、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中显示

在这里插入图片描述
对于vnc的部署安装可以直接使用现成的docker镜像，用docker search vnc可以搜出来，比如dorowu/ubuntu-desktop-lxde-vnc，然后在里面部署相关组件就可以用起来了

但是，只是通过VNC来进行自动化测试，是没办法模拟键盘和鼠标等一些操作，同时一些浏览器外的交互就实现不了，最明显的就是上传文件，那如果要解决这种场景，那基本上环境那块就要把浏览器外的环境也一起模拟进来，那就是接下来要讲的用noVNC的方式来解决这个问题

03、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操作系统，然后其实就相当于一台现成的虚拟机。

整套流程如下图：

在这里插入图片描述