Docker + Chrome Headless + Selenium WebUI + Git CI/CD 集成自动化

Chrome Headless 介绍

Chrome Headless 是 chrome 浏览器的无界面模式,可以在不启用 GUI 的情况下使用 chrome 浏览器的所有特性运行你的程序。这样更方便在 Linux 服务器上部署，同时可以方便用代码来操作浏览器，并且稳定性也有保证。效率也是非常的快。

方案介绍

使用原因

前期 Web UI 使用 Jenkins + Selenium 放式进行回归测试/每日多次或者一次的方式来验证功能的正确性。不能满足上线/前后端代码部署构建成功后的试试测试。
公司希望在前后端代码构建完成后，加入自动化功能测试机制。类似单元测试机制。

使用困难

因前后端代码都部署在云服务器，且操作系统基本都是 Liunx 无 GUI 界面的操作系统。加入 UI 自动化测试非常难，Chrome Headless 模式最早只支持 59 版本以后。且 Bug 较多

解决方案

环境搭建

Docker 安装

本人因使用 Mac 电脑。版本：10.14.4 Docker 安装就不多做说明。下载安装就可以。

Docker Image 创建

本人已制作好 image 文件。Dockerfile 大家可关注 Github
Docker Image 地址：https://hub.docker.com/r/zanderchao/wensau_selenium
Docker 构建过程。GitHub 地址：https://github.com/chaozhangpower/wensau_selenium
会定时更新/已经修复 Bug

Dockerfile 示例

FROM zanderchao/wensau_selenium:v3

MAINTAINER Wensau 

#安装自己需要的依赖包
RUN pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple retrying

WORKDIR /opt/

#将当前目录的文件，拷贝到容器的/opt/webuitest/ 路径大家可自行更换
ADD .  /opt/webuitest/

UI 自动化代码示例

#初始化driver
chrome_options = Options()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')
chrome_options.add_argument('--no-sandbox')
chrome_options.add_argument('--window-size=1200,600')
self.driver = webdriver.Chrome(chrome_options=chrome_options)
time.sleep(5)
#后续操作步骤和Selenium 一样的。
print("打开页面URL" + "https://www.baidu.com")
self.driver.get("https://www.baidu.com")
print("页面加载完成")

加入 Git CI/CD

代码提交后，需要运维配合构建。这个就根据自己公司的运维配合就可以。
每一次提交代码到 git 会自动构建新的镜像/运维同学会搞定。

每次开发人员提交新的代码构建时。让运营人员加入您的构建过程，这样就可以实现每次上线，自动部署执行。也可以定时执行。

问答

QA 1: 执行结果怎么处理？
我选择的是执行完成后，将执行结果已邮件的方式发送
QA 2:报告截图怎么拿出来？
本人选择的方式是将脚本截图/html 报告均上传阿里 oss。大多数公司是有的。如果没有请留言，我将增加本地导出脚本
QA 3:邮件的报告样式：

QA 4: HTML 报告样式：
GitHub :https://github.com/wishchen/ExtentHTMLTestRunner
感谢 wishchen 提供修改模版