Web UI自动化框架大比拼

引子

对于测试从业者来说，手工测试是一个绕不过去的坎。当年我校招毕业以测试工程师岗位进了一家互联网公司。入职第一天就被师父"拉去干活"，至今印象深刻，是一个投顾管理平台（投资顾问管理客户的平台，主要功能是为用户做理财资讯推荐）。主要工作就是让我结合测试用例对这个web页面进行测试，说白了就是点点点。测试新人嘛，这些对于我来说挺新鲜的，但是随着时间的流逝，不到几个月就感觉有点不对了，手工测试完全是个机械化的工作，在执行用例过程大脑是没有思考的，长此以往，会让你的大脑形成固化思维，在测试过程中大脑能得到的测试价值边际效应是递减的，所以这也就解释了大部分手工测试人员普遍测试积极性不高，对未来充满焦虑。

穷则思变，当时作为小白的我向身边的测试老手了解到可以学习UI自动化测试。那时起，测试之路仿佛有了一盏灯塔，让我对其充满向往。随着从事测试行业工作的年限增长，测试经验也越来越丰富，期间大大小小也做了非常多的项目。渐渐地对UI测试自动化也做了些许积累。下面将这些年来接触的UI自动化测试框架做一个对比，供大家能结合自己手上的项目选择合适的框架用于工作中。

框架大比拼

UIrecoder

UIRecorder 是一款阿里开源的 UI录制 和 回归测试 工具，用于录制浏览器页面 UI 的操作。通过 UIRecorder 的录制功能，可以在自测的同时，完成测试过程的录制，生成 JavaScript 测试脚本代码。回归测试过程中，可以利用生成的 JavaScript 测试脚本代码，使用 Mocha 对自测过程进行回放，以达到零成本做自动化回归测试的目的。

优点

零成本的自动化解决方案：完全无干扰录制，让开发在自测过程中就能同步录制出自动化。
测试报告直观：测试结果会生产 HTML 格式的报告文件，且每一个核心步骤都会自动截图，便于通过截图直观地分析报错原因。
测试多浏览器兼容性：通过 Chrome 浏览器一端录制生成的测试用例脚本，可以在 Firefox、IE、Opera 等浏览器多端运行回归测试。

搭建

环境搭建

Nodejs

根据电脑操作系统，选择对应的安装包，下载链接：https://nodejs.org/en/

Chrome

下载链接：https://www.google.com/chrome/

CNPM

由于 npm 是国外网络环境，可能被墙或下载速度较慢，可以使用 cnpm , 下载速度更快。运行以下命令安装 cnpm：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

JDK

安装 Java JDK：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

UIRecorder

cnpm install uirecorder mocha macaca-reporter -g

可以使用以下命令检查安装情况：

cnpm list uirecorder -g
cnpm list mocha -g
cnpm list macaca-reporter -g

Cypress

Cypress 是在 Mocha的基础上开发的一套开箱即用的 E2E测试框架，并不依赖前端框架，也无需其他测试工具库，配置简单，并且提供了强大的 GUI 图形工具，可以自动截图录屏，在测试流程中 Debug。支持端到端测试、集成测试和单元测试，支持测试在浏览器中运行的任意内容。

功能

时间旅行
自动等待（类似 Jest 中的 wait）
网络流量控制
截屏
持续集成

环境搭建

Nodejs

根据电脑操作系统，选择对应的安装包，下载链接：https://nodejs.org/en/

Cypress

npm install cypress --save-dev   # 安装cypres

Selenium

Web UI自动化测试框架，底层基于webdriver实现，浏览器实现了webdriver功能都可以用它来自动调起和测试。

功能

测试与浏览器的兼容性；
测试系统功能；
支持自动录制动作，和自动生成 .NET、Perl、Python、Ruby 和 Java 等不同语言的测试脚本。

环境搭建

Chrome

下载链接：https://www.google.com/chrome/

ChromeDriver 镜像: http://npm.taobao.org/mirrors/chromedriver

Python/JDK

pip3 install selenium

https://www.selenium.dev/downloads/

Airtest

AirtestProject是由网易游戏推出的一款自动化测试框架，功能如下：

Airtest：是一个跨平台的、基于图像识别的UI自动化测试框架，适用于游戏和App，支持平台有Windows、Android和iOS。
Poco：是一款基于UI控件识别的自动化测试框架，目前支持Unity3D/cocos2dx-*/Android原生app/iOS原生app/微信小程序，也可以在其他引擎中自行接入poco-sdk来使用。
AirtestIDE：跨平台的UI自动化测试编辑器，内置了Airtest和Poco的相关插件功能，能够使用它快速简单地编写Airtest和Poco代码。

功能

自动化脚本录制、一键回放、报告查看，轻而易举实现自动化测试流程
支持图像识别，适用于所有Android和Windows游戏
支持UI控件搜索，适用于Unity3d，Cocos2d与Android App
跨系统，能够运行在Windows和MacOS上

环境搭建

Chrome

下载链接：https://www.google.com/chrome/

ChromeDriver 镜像: http://npm.taobao.org/mirrors/chromedriver

官网下载

http://airtest.netease.com/download.html?download

Python

如果你想要利用Airtest的API，自己拓展更多的高级功能的话，可以先下载airtest的python第三方依赖库：

brew install python3.6.4
#下载python3
pip3 install Airtest
#下载Airtest python第三方依赖库
pip3 install poco #下载Airtest提供的Android app ui测试库pocoui

后话

首先，要明确一点，做UI自动化并非是完全替代手工测试，所以你要明确做UI自动化的目的，是用于冒烟测试、回归测试、e2e测试等，通常来说一个回归测试更适合自动化实现。

其次，要评估好做UI自动化的投资产出比ROI(Return On Investment)。

自动化测试ROI公式：

ROI =（手动测试成本–自动测试成本）/自动测试成本*100%

手工测试成本=手工用例设计成本+手工测试总执行成本=手工用例设计成本+（手工用例单次执行成本+手工用例单次维护成本+手工用例单次发现问题排查成本）*执行次数

自动化测试成本=自动化测试框架、测试代码首次开发成本+自动化用例数*自动化用例平均设计成本+自动化用例单次平均维护成本*运行次数+自动化用例单次执行成本*执行次数

最后，所有的自动化都是有学习成本的，也必须掌握一门编程语言，对于本文介绍的UI自动化来说，前端HTML、CSS、JavaScript等基础必须是掌握的，更进一步能掌握市面上主流的前端开发框架。编程语言也是必须的，测试同学学习较多的编程语言如Java、Python，可以选择其一。

附录

阿里镜像库：https://developer.aliyun.com/mirror/NPM?from=tnpm

往期推荐

接口间参数传递的一种解决方案

经验分享｜测试工程师转型测试开发历程

浅谈Mock平台的设计思路

接口自动化测试框架设计思路

接口自动化测试框架实践1：接口测试概述

我在阿里做测开