前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Web UI自动化框架大比拼

Web UI自动化框架大比拼

作者头像
互联网金融打杂
发布2022-08-01 14:42:36
1.2K0
发布2022-08-01 14:42:36
举报

引子

对于测试从业者来说,手工测试是一个绕不过去的坎。当年我校招毕业以测试工程师岗位进了一家互联网公司。入职第一天就被师父"拉去干活",至今印象深刻,是一个投顾管理平台(投资顾问管理客户的平台,主要功能是为用户做理财资讯推荐)。主要工作就是让我结合测试用例对这个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:

代码语言:javascript
复制
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
  • JDK 安装 Java JDK
  • UIRecorder
代码语言:javascript
复制
cnpm install uirecorder mocha macaca-reporter -g

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

代码语言:javascript
复制
cnpm list uirecorder -g
cnpm list mocha -g
cnpm list macaca-reporter -g

Cypress

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

功能

  1. 时间旅行
  2. 自动等待(类似 Jest 中的 wait)
  3. 网络流量控制
  4. 截屏
  5. 持续集成

环境搭建

  • Nodejs

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

  • Cypress
代码语言:javascript
复制
npm install cypress --save-dev   # 安装cypres

Selenium

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

功能

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

环境搭建

  • Chrome

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

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

  • Python/JDK
代码语言:javascript
复制
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代码。

功能

  1. 自动化脚本录制、一键回放、报告查看,轻而易举实现自动化测试流程
  2. 支持图像识别,适用于所有Android和Windows游戏
  3. 支持UI控件搜索,适用于Unity3d,Cocos2d与Android App
  4. 跨系统,能够运行在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第三方依赖库:

代码语言:javascript
复制
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,可以选择其一。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-07-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引子
  • UIrecoder
  • Cypress
  • 环境搭建
  • Selenium
  • 环境搭建
  • Airtest
  • 环境搭建
  • 后话
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档