如何实现前端项目的自动化测试?

2023-11-07

这其实就是我们常说的“UI自动化测试”,针对这个问题,我先告知答题思路如下:

1、什么是UI自动化?有什么优势?
2、UI自动化实践中会遇到什么难题?
3、如何解决难题,将UI落实到实践中?【重点】
4、UI自动化学习资料推荐

一、什么是UI自动化?为什么使用UI自动化?

1、什么是UI自动化?

本质上来说,UI自动化测试,就是通过脚本或工具代替人工去执行功能测试用例,自动完成测试用例的执行工作。常用于验证用户界面的功能、兼容和稳定性等,主要用于执行回归测试。

UI自动化测试,可以模拟用户与应用程序或网站的交互,自动执行用户界面上的操作,如点击按钮、输入文本、选择选项等,并检查应用程序或网站的响应和行为是否符合预期,在软件开发过程中帮助检测是否存在bug。

2、UI自动化有什么优势?

UI自动测试可以模拟人工执行测试,是最接近用户真实操作的测试方法,这是UI自动化测试最吸引人的地方,那么UI自动化测试还有下面这些优势:

优势1:提高测试效率。

相比手动测试,UI自动化测试可以快速、准确地执行大量的测试用例,提高测试效率,减少人工测试的工作量。

优势2:提高测试覆盖率。

UI自动化测试可以覆盖应用程序或网站的各个功能和页面,确保每个功能都经过测试,提高测试覆盖率,减少漏测的风险。

优势3:提高测试一致性。

UI自动化测试可以确保在不同平台、浏览器或设备上的测试执行一致,减少人工测试的主观因素,提高测试的一致性和可靠性。

优势4:提高软件质量。

UI自动化测试可以帮助检测和修复应用程序或网站中的错误和缺陷,提高软件质量,减少软件发布后的问题。

但UI自动化测试在实战中却像是“带刺的玫瑰”。因为它能模拟用户真实的操作应用程序或前端网站,是最贴近用户真实行为的模拟测试,但是因为实践中的一些难题,导致UI自动化容易投入很大,却没有取的很好的效果。

二、UI自动化实践中会遇到什么难题?

有些人说UI自动化没有啥用,主要是UI自动化在实际应用中会遇到一些难题,导致没有取的很好的效果,UI自动化测试目前主要面临下列这些挑战:

1.UI自动化测试的投入产出比低。

想要取得好的效果,必须前期投入较大在资源进行脚本开发,但是往往后期使用时没有取的预想的效果,容易导致投入中断?

2.保障脚本的维护是个大问题。

项目频繁的迭代,导致前端页面变化很快,对应的脚本得不断的修改,如何保障脚本的维护是个大问题。

3.UI自动化测试的稳定性也是个挑战。

脚本执行时经常遇到各种奇奇怪怪的Bug,如何保障脚本的稳定性是个头疼的问题。

三、实践中如何解决以上4个难题?【重点】

实际过程中,以上4个难题该如何进行优化呢?咱们以前端的web UI自动化为项目,以Python+Selenium框架为背景,来看下项目若要执行自动化测试,应该怎么搞。

优化1:如何保障投入产出比?

很多人搞UI自动化测试没有想清楚到底要怎么搞?上来就拿个框架,先搞起来再说,投入了很多人力物力,然后搞到一半时却发现很多问题,最后就完犊子了。。。

所以开始前,需要做好规划,要明确目标。如果是新起动的UI自动化测试,建议可以先选好框架,然后选择一个业务流程作为案例,以该案例为目标去执行框架的搭建和脚本的开发,完成开发后主要投入回归测试当中,看看实际执行的效果如何,然后统计投入的时间和人力成本,然后再进行下一步的推进。

优化2:如何保障脚本的维护?

当前项目都是频繁迭代的,这是不可改变的事实,所以脚本写完后一定需要维护修改。

基于这个事实,我们能优化的就是减少修改的次数,在UI自动化中,最常用的优化方法就是使用PO模式进行封装。

那什么是PO模式呢?

PO,是Page Object的缩写,简单来说,就是将前端项目中的每个页面封装为一个“类”,页面上的元素都封装为实例的“属性”,页面上的功能操作都封装为实例的“方法”。

这样封装后,无论将来页面怎么变化,我们只需要修改一次即可,可以大大的提升维护的效率。

PO模式是自动化测试项目开发实践的最佳设计模式之一

优化3:如何保障脚本执行的稳定性?

UI自动化脚本执行时可能会遇到各种问题,比如浏览器启动时间过长,比如页面加载过长,比如图片被挡住等等,你无法预知。

优化方法,除了我们常用的各种显式或隐式等待处理外,我们还可以对原始的api进行封装。比如以Web UI常用的Selenium框架为例,当我们等待某个元素出现时,为了保障成功性,需要对“等待”做一个封装。除了显示等待外,还可以进一步优化,做个循环处理,就是等待3次,每次等待失败后可以重新刷新等待。

比如封装一个“等待元素”出现,确保可以点击的方法,如下所示:

def element_click_wait(self, located_type, located_key, assert_condition=None, message="执行点击超时",time_out=10, refresh=False):        """        【适用于页面跳转时等待元素出现,确保可以点击的场景】        等待1个元素点击是否正常,并验证点击是否成功,每隔一段时间轮询点击1次,直到超时抛出异常为止        @:param located_type 定位方式(8种:id name class tag link plink xpath css)        @:param located_key 定位关键字        @:param assert_condition 验证点击是否完成的断言条件语句【默认不验证点击是否成功】        @:param message 点击失败提示信息        @:param time_out 等待时长,默认为10秒        @:param refresh 刷新标志,如果为True,则在等待超时后,刷新页面,重新再执行一轮等待执行(相当于刷新后重新执行一次)        如果是False,则不执行刷新,直接超时报错        """        driver = self.driver        is_type_true = 0  # 用户判断定位方式参数是否正确        for i in range(int(time_out)*2):  # 循环次数为配置的2倍,以便处理刷新重试的情景            try:                time.sleep(1)                if located_type == "id":                    driver.find_element_by_id(located_key).click()                elif located_type == "name":                    driver.find_element_by_name(located_key).click()                elif located_type == "class":                    driver.find_element_by_class_name(located_key).click()                elif located_type == "tag":                    driver.find_element_by_tag_name(located_key).click()                elif located_type == "link":                    driver.find_element_by_link_text(located_key).click()                elif located_type == "plink":                    driver.find_element_by_partial_link_text(located_key).click()                elif located_type == "xpath":                    driver.find_element_by_xpath(located_key).click()                elif located_type == "css":                    driver.find_element_by_css_selector(located_key).click()                else:                    is_type_true = 1            except:                if i == (int(time_out)-1):  # 第1次循环到点判断                    if refresh:  # 执行刷新后重新再执行1轮                        refresh = False                        self.element_refresh_wait()  # 刷新页面                        continue                    else:  # 不执行刷新重试                        AutomationLog.LogMsg("点击失败,第1次等待超时啦!---【"+located_type+","+located_key+"】", 2)                        raise ex.TimeoutException(message)                elif i == (int(time_out)*2-1):  # 刷新后再执行1轮还是失败了                    AutomationLog.LogMsg("点击失败,第2次等待也超时啦!---【" + located_type + "," + located_key + "】", 2)                    raise ex.TimeoutException(message)                elif assert_condition:  # 正常执行循环(验证点击是否成功,成功则结束循环,否则继续循环)                    try:                        WebDriverWait(driver, 1).until(assert_condition)                        break                    except:                        continue                else:  # 正常执行循环(不验证点击结果)                    continue            if is_type_true == 1:                AutomationLog.LogMsg("定位方式写错啦,请检查located_type参数!---【" + located_type + "】", 2)                raise ex.InvalidArgumentException("定位方式参数出错!")            elif assert_condition:  # 正常执行循环(验证点击是否成功,成功则结束循环,否则继续循环)                try:                    WebDriverWait(driver, 1).until(assert_condition)                    break                except:                    continue            else:  # 正常执行循环(不验证点击结果)                break

当然,除了以上的实践经验,其他比如还可以找开发配合,对要测试的常用UI元素进行id的编码,这样也可以大大提升成功的效率,轻松解决定位的问题等。

四、UI自动化学习资料推荐

UI自动化分为web自动化和app自动化。

如果想深入学习UI自动化,建议可以看下列4套视频进行系统学习,如下所示:

1)《6天UI自动化2021版》 
本视频b站链接:https://www.bilibili.com/video/BV18Q4y1y7v3

2)《8天web自动化入门教程》 
本视频b站链接:https://www.bilibili.com/video/BV1eZ4y1s7BY

3)《0基础入门移动自动化Appium框架》 
本视频b站链接:https://www.bilibili.com/video/BV11p4y197HQ

4)《Appium进行IOS真机自动化测试》 
本视频b站链接:https://www.bilibili.com/video/BV1tT4y137bD

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何实现前端项目的自动化测试? 的相关文章

  • 软件测试|Pydantic处理时间类型数据

    简介 我们之前介绍过使用 pydantic 验证数据 比如校验数据的格式等 但是在我们的日常工作中 还有一种数据是需要我们验证的 比如时间数据 时间数据不同于字符串 列表等数据 与他们的验证不一样 本文就来为大家介绍一下 pydantic
  • 软件测试|Python数据可视化神器——pyecharts教程(九)

    使用pyecharts绘制K线图进阶版 简介 K线图 Kandlestick Chart 又称蜡烛图 是一种用于可视化金融市场价格走势和交易数据的图表类型 它是股票 外汇 期货等金融市场中最常用的技术分析工具之一 可以提供关于价格变动 趋势
  • 软件测试|教你使用Python下载图片

    前言 我一直觉得Windows系统默认的桌面背景不好看 但是自己又没有好的资源可以进行替换 突然我一个朋友提醒了我 网络上的图片这么多 你甚至可以每天换很多个好看的背景 但是如果让我手动去设置的话 我觉得太麻烦了 我不如使用技术手段将图片下
  • 软件测试|如何使用selenium处理iframe富文本输入框

    简介 在网页开发中 富文本框是常见的元素 用于输入富文本内容 如富文本编辑器或邮件编辑器 如果我们要使用Python和Selenium进行自动化测试或操作这种富文本框 可能会遇到一些挑战 本文将详细介绍如何使用Python和Selenium
  • 点击存储到固定时间清除存储

    这段代码 无意间想到的 随便写了下来 运行 根据点击之后传递一个参数 将他存入本地存储 方便测试为10秒 10秒后触发下一个事件 清除本地存储 结束
  • 【gee】下载modis土地利用类型

    var china ee FeatureCollection projects assets china boundary var lc dataset ee ImageCollection MODIS 061 MCD12Q1 filter
  • Vue3 和Vue2的区别,以及钩子函数的使用

    Vue js 3 和 Vue js 2 是两个主要版本的流行前端框架 它们之间有很多区别 包括性能优化 新特性和改进的API等 以下是一些Vue 3与Vue 2之间的主要区别 以及一些示例代码来说明这些差异 1 性能优化 响应式系统 Vue
  • 低代码-添加按钮组件设计

    效果图 可拆分为以下细节 按钮列表 删除 两个操作需同步删除 点击外侧删除 点击复选框删除 添加 点击复选框添加 示例代码 技术栈 vue3 arco design ts less tailwindcss
  • 低代码配置-属性配置面板设计

    模块设计 tab项切换 组件基础属性 组件数据属性 组件事件属性 表单属性 模块输出函数设计 tab切换函数 列表表单属性 数据来源 调用接口时一次赋予 无需使用selectItem 如需使用 归入基础属性 列表标题 是否展示筛选区域
  • 新手也能看懂的【前端自动化测试入门】!

    前言 最近在网上搜索前端自动化测试相关的文档 但是发现网上的文章都是偏使用 没有把一些基础概念说清楚 导致后续一口气遇到一些 karma Jasmine jest Mocha Chai BDD 等词汇的时候很容易一头雾水 这次一方面整理一下
  • 探索自动化测试断言:提升测试效率与质量的关键!

    前言 断言在自动化测试中起着关键的作用 它是验证测试结果是否符合预期的重要手段 如果在自动化测试过程中忽视了断言 那么这个测试就失去了其本质的意义 因为我们无法得知测试结果是否达到了预期的效果 因此 断言在自动化测试中的重要性不言而喻 那么
  • 2024拒绝行业内卷!八年软件测试20K*16薪行业心得 想入行必看

    目前工作做软件测试工作8年 属于高级测试员那个级别吧 现在看到各行各业的人都在转行学习软件测试 想给大家一些学习建议和忠告 很多粉丝都跟我说今年行情很差 找不到工资 真的找不到工作了吗 我们常在网上看到的 程序员饱和 程序员过剩 其实一般是
  • JVM优化之 -Xss -Xms -Xmx -Xmn 参数设置

    JVM优化之 Xss Xms Xmx Xmn 参数设置 XmnXmsXmxXss有什么区别 Xmn Xms Xmx Xss都是JVM对内存的配置参数 我们可以根据不同需要区修改这些参数 以达到运行程序的最好效果 Xms 堆内存的初始大小 默
  • 一文让你了解UI自动化测试

    测试都起什么作用 是项目的保险 但不是项目的救命草 测试无实际产出 但作用远大于实际产出 测试是从项目维度保证质量 而不是测试阶段 UI自动化 下面简称自动化 基于UI进行自动功能测试 以Web端作为例子 一般的UI功能自动化都是基于HTM
  • Web自动化测试 —— capability参数配置

    一 capability概述 capability是webdriver支持的标准命令之外的扩展命令 配置信息 配置web驱动属性 如浏览器名称 浏览器平台 结合selenium gird完成分布式 兼容性测试 官网地址 https www
  • 一文让你快速写出高效的软件测试用例

    前言 编写测试用例的目的就是确保测试过程全面高效 有据可查 但要编写出高效的测试用例 需要搞清楚什么是测试用例 以及如何编写出高效的测试用例 接下来将从以下几个部分来进行展开 1 什么是测试用例 2 如何编写测试用例 3 软件测试学习资源分
  • 每天10个前端小知识 <Day 14>

    前端面试基础知识题 1 CSSOM树和DOM树是同时解析的吗 浏览器会下载HTML解析页面生成DOM树 遇到CSS标签就开始解析CSS 这个过程不会阻塞 但是如果遇到了JS脚本 此时假如CSSOM还没有构建完 需要等待CSSOM构建完 再去
  • 【js学习之路】遍历数组api之 `filter `和 `map`的区别

    一 前言 数组是我们在项目中经常使用的数据类型 今天我们主要简述作用于遍历数组的api filter 和 map 的区别 二 filter和map的共同点 首先 我们主要阐述一下 filter 和 map 的共同点 api的参数都是回调函数
  • 深入解析 YAML 配置文件:从语法到最佳实践

    一 认识YAML YAML YAML Ain t Markup Language 是一种人类可读的数据序列化语言 它的设计目标是使数据在不同编程语言之间交换和共享变得简单 YAML采用了一种简洁 直观的语法 以易于阅读和编写的方式表示数据结
  • 如何在 Python 脚本中使用 Google OAuth2

    在使用 Python 脚本将视频上传到 YouTube 频道时 若希望将视频上传到第二个频道 需要解决 OAuth2 授权的问题 解决方案 创建新的 Google Cloud 项目 from google oauth2 import ser

随机推荐

  • 强化学习基础

    强化学习 强化学习概念 强化学习 RL 就是智能体Agent与环境交互从而进行学习的一种机器学习方法 Agent执行一个动作后 会从环境中获得反馈 这个反馈就是环境对这个动作做出的评价 这个可以理解为当你拿100分时 你妈妈会给你一顿大餐的
  • 毕业设计 STM32单片机的GPS定位系统 - 物联网

    基于STM32单片机的定位系统 由 STM32F103C8T6单片机最小系统 GPS模块 ESP8266 系统内可以通过ESP8266无线传输模块将GPS传回来的数据在ONENET界面显示 ONENET界面可以显示行驶距离 速度 经纬度还可
  • 中望cad文字显示问号怎么办_CAD字体显示问号解决方法

    很多朋友查看CAD图纸的时候会出现很多问号 这到底是怎么回事呢 想要搞定也是很麻烦的 小编提供的这款CAD字体 问号修复工具采用lsp格式 加载后再命令行输入fs回车即可解决cad字体中出现问号的问题 遇到类似问题的朋友不妨下载试试 使用说
  • 算法导论学习--红黑树详解之删除(含完整红黑树代码)

    前面我们讨论了红黑树的插入的实现 基本思想是分类讨论 然后分情况讨论以后我们发现插入操作调整函数只需要处理三种情况 并不是太复杂 但是删除操作会更复杂一点 因为二叉搜索树的删除操作本身就分成了多种情况 这样在执行删除操作后要处理的情况会更多
  • tomcat 远程连接

    在catalina sh里面添加以下配置 JAVA OPTS server XX PermSize 1024m XX MaxPermSize 2048m Xms3072 Xmx5120m XX UseParallelGC XX Parall
  • 爆了!2023 年上半年全球程序员薪酬报告

    大家好 这里是 NewBeeNLP 近日 美国科技公司数据收集网站 Levels fyi 发布了 2023 年上半年全球程序员薪酬报告 并统计了各领域薪酬的增长比例 我们从上表可以看到各个领域当中 增强现实 虚拟现实 AR VR 总薪酬中位
  • PC汇编语言(NASM)

    http www drpaulcarter com pcasm 转载于 https www cnblogs com yuanping archive 2012 12 29 2838844 html
  • 归并排序,C++实现

    归并排序 采用分治法的一个典型应用 实现方法有两种 1 自上而下的递归 所有递归的方法都可以用迭代重写 2 自下而上的迭代 c 代码 递归版 include
  • QT串口收发

    QT串口收发 串口扫描 配置串口信息 设置串口名称 设置波特率 设置数据位 设置奇偶校验 设置停止位 设置流控制 设置读取数据的缓存大小 打开串口 串口打开并配置代码 串口接收数据 串口发送数据 串口关闭 offAndOn自定义函数 使co
  • react组件的生命周期以及基本语法

    组件化的发展历程 面向对象 封装 集成 多态 模块化 13 16年 解决了全局变量和变量勿滥 组件化 使编程更轻量化 创建组件 组件的使用 无需注册 跟html标签书写一致 首字母大写 必须有根标签 一个组件一个模块 组件生命周期钩子函数
  • mvc:default-servlet-handler和mvc:annotation-driven成对出现的原因

  • [人工智能-深度学习-62]:环境搭建 - 增加或更换硬盘,SSD/SATA/SAS哪个好?

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 人工智能 深度学习 62 环境搭建 增加或更换硬盘 SSD SATA SAS哪个好 文火冰糖 王文兵 的博客 CSDN博客 第1章 硬盘的分
  • Linux提权

    目录 编辑 一 信息收集 Linux脏牛内核漏洞 SUID 1 信息收集 2 SUID提权 案例 1 SUID提权配合脚本 2 本地配合内核漏洞 3 脏牛内核漏洞演示 linux exploit suggester 二 定时任务 环境变量
  • SQL注入原理-数值型注入

    小伙伴们大家好 本期为大家带来的是SQL注入原理 数值型注入的讲解 目录 SQL注入原理 数值型注入 编辑 1 测试是否存在注入点 2 判断字段个数 3 找出可以回显的字段 4 查询数据库的信息 1 查看当前的数据库 2 查看当前数据库的用
  • 操作系统调度算法

    在操作系统中存在多种调度算法 其中有的调度算法适用于作业调度 有的调度算法适用于进程调度 有的调度算法两者都适用 下面介绍几种常用的调度算法 先来先服务 FCFS 调度算法 FCFS调度算法是一种最简单的调度算法 该调度算法既可以用于作业调
  • ddt+BeautifulReport,报告展示用例描述,unittest用例统计

    当前使用的ddt来管理测试数据 需要读取测试数据内每一条case的描述 修改之前 修改途径 ddt源码内 将test data docstring get test data docstring func v 修改为 test data d
  • 【Java】得到当前股票信息

    import java io BufferedReader import java io InputStreamReader import java net HttpURLConnection import java net URL pub
  • Java TreeMap排序

    TreeMap实现了SortedMap接口 根据键自然排序 要求键必须是可比较的 要么指定Comparator比较器 如果没有Comparator比较器 键要实现Comparable接口 package Map import java ut
  • linux查看某文件夹下各个文件大小

    例如 我想查看 app 下各个文件的大小 cd app du h max depth 0 解释 cd app 进入 app 文件夹 du h max depth 0 查看文件夹下各个文件的大小 其中 0 代表查看 本文件夹 在这儿是app文
  • 如何实现前端项目的自动化测试?

    这其实就是我们常说的 UI自动化测试 针对这个问题 我先告知答题思路如下 1 什么是UI自动化 有什么优势 2 UI自动化实践中会遇到什么难题 3 如何解决难题 将UI落实到实践中 重点 4 UI自动化学习资料推荐 一 什么是UI自动化 为