前端开发:基于cypress的自动化实践

  • 如何在vue中使用cypress
  • 如何运行cypress
  • 如何编写测试用例
  • 如何解决测试数据的问题
  • 遇到的元素定位的问题
  • 如何看待cypress
  • cypress是否为最佳工具
  • 测试怎么办?

如何在vue中使用cypress

vue提供了vue-cli 可以快速的创建vue项目。

vue create hello-world

在选择安装项里面选择: E2E testing -> cypress

如何运行测试

  1. 通过命令启动
> npm run test:e2e
  1. 开启cyprss 管理窗口

  1. 点击Run all specs 或 某个测试文件运行

这里以项目管理 模块为例,运行5条用例只需要14s,速度还是非常快的。

如何编写测试用例

站在前端开发的角度上编写UI自动化用例,总体感受还是非常方便的!

首先,为所有要操作的元素设置统一的属性。

<el-button cy-data="create-project" type="primary" @click="showCreate">创建</el-button>
...
<el-button cy-data="edit-project" type="text" size="small" @click="showEdit(scope.row)">编辑</el-button>
<el-button cy-data="delete-project" type="text" size="small" @click="deleteProject(scope.row)">删除</el-button>
...

不建议占用HTML提供的的 idnameclass... 这些属性,他们一般都会有指定的用途,比如,class 是用来引用css样式的。 那么通过cy-data=xxxx即可以避免冲突,又更加统一和规范。

接下来,就是编写 cypress 自动化代码了

describe('项目管理', () => {it('添加项目', () => {cy.visit('/#/project')cy.get('[cy-data=create-project]', { timeout: 3000 }).click()cy.wait(1000)cy.get('[cy-data=project-name]', { timeout: 3000 }).type('项目名称')cy.get('[cy-data=project-desc]', { timeout: 3000 }).type('项目备注信息')cy.get('[cy-data=save-button]', { timeout: 3000 }).click()  // 保存项目});// ...
})

如何解决测试数据的问题

我们编写自动化测试用例,不管是接口还是UI都会面临测试数据的问题。比如,我要测试登录,得先去创建一个用户数据,我要测试搜索,先去创建一批可以搜索的数据。

为此,我们不得不在自动化里面 使用setUp/treaDown这些fixture去写大量的前置或后置动作,来完成这些准备工作。站在测试的角度,这无疑让我们的测试用例变得复杂,然后,也很容易因为测试数据造成自动化用例的失败。

那么,站在前端开发是如何解决的?在此之前我们要先了解一下开发过程:

在项目开发过程中。前端为了更顺利的完成开发工作,不能等到后端开发好了接口,再手写前端功能,所以,会和后端定义好接口之后,通过mock来模拟接口数据,--面向mock开发

那么在面向mock开发的过程中,避免不了,前后端需要调整接口参数的情况,比如,前端需要增加一个字段,或后端说需要把数据结构调整一下。

我们使用YAPI平台进行接口的定义,他可以根据定义随机的生成mock数据,数据的每个字段都可以随机生成,例如,nameemaildatatime 等。

你可以直接通过下面的链接来访问mock接口:

https://yapi.baidu.com/mock/40650/api/v1/projects/list

如何vue项目当中配置不同的环境?你需要去学习vue开发...

遇到的元素定位问题

然而,为每个元素添加定位方式,有时并不是我们想象的那么简单。

如果你是使用过前端UI(例如 element-ui)库就会发现,并不是所有的页面元素都是通过HTML纯手写的。 例如,下面的弹窗。

通过 element-UI的实现方式是这样子的。

<template><el-button type="text" @click="open">点击打开 Message Box</el-button>
</template><script>export default {methods: {open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({ type: 'success',  message: '删除成功!' });}).catch(() => {this.$message({ type: 'info', message: '已取消删除' });          });}}}
</script>

弹窗完全通过 element-UI 渲染,我们无处给 确定取消 等按钮加上定位专用属性。 这个时候,前端开发就没什么优势了,必须老老实实的去前端页面上定位元素,写复杂的css定位。

然而,就算我自定义了定位,有时候元素也不是唯一的。例如

对于上面的列表,通过自定义定位得到的是一组元素。然而,如果只是一组元素的问题就就没必要单独拿出来说了,正如上图,列表中看到的是 4 个元素,通过定位方式得到的是8个元素,前4个是隐藏的,这和使用的 element-UI 库有关,因为数据是YAPI随机生成的,不能写死对第5个显示元素进行操作。 cypress 提供的 force 非常有用,他会强制对隐藏的元素进行操作。

cy.get('[cy-data=edit-project]', { timeout: 3000 }).first().click({ force: true })

如何看待cypress

前端开发视角

作为一名前端开发,客观的说,使用cypress的过程并没有遇到太多阻力。我来总结一下。

  1. 因为使用了yapi,不需要考虑测试数据的准备。
  2. 不需要写依赖步骤,主要是目前的业务功能也没有太长的操作过程。
  3. 大部分情况下可以自定义元素属性,在定位上不需要花费过多的时间,也不需要写太长的定位。
  4. 测试运行速度可以接受,28条用例运行耗时80秒左右。

测试视角

作为一名自动化测试,如果让我使用cypress。

  1. 为了验证数据的正确性,我不能要求开发使用 yapi 假数据,所以,还是要自己准备数据。
  2. 根据业务的情况,必须要的前置/后置动作不可避免。
  3. 虽然,说服开发统一自定义元素有点难,对来我说并不是不可办到!
  4. cypress 做UI自动化确实比selenium要快一些,但是他相比selenium,不支持更多的浏览器,不支持Grid远程调用,甚至不能根据自己的熟练度选择语言。所以,cypress 优势并没有压倒性优势,具体还是要看需求。

cypress是否为最佳工具

cypress是否为所有UI自动化的最佳工具?

在面向前端的开发框架Vue/React中 确实很好的整合cypress,使我们的使用更加方便。

在我接触到的偏后端的django Web框架中就很好的整合了Selenium,同样可以达到类似的效果。 我之前看过一本《Test-Driven Development with Python》 ,书中就很好的将基于Selenium的UI测试与Django开发很好的结合起来了。

所以,结论是结合你的开发框架去选择合适的 E2E 测试工具。

测试怎么办?

一直以来,我们都天然的认为UI自动化测试就应该是测试来做的,并以能做UI自动化测试为高级目标!但从我上面的实践中,我们会发现其实开发来做UI自动化优势很明显。那么测试怎么办?我们只能老老实实的回去测功能了吗?当然不是。

  1. 并不是每个开发都懂得编写UI自动化测试,虽然,这对他们来并不是特别难,我们完全在这方面成为“教练”,教开发如何编写UI自动化测试,如何设计更全面的测试用例。

  2. 并不是每个团队的开发都有时间编写UI自动化测试,也可能是他们不愿意写,那么我们为何不加入他们?以我前面介绍的方式,深度地参与到项目的自动化测试编写中。而不是现在这样,将项目开发和自动化测试完全割裂开分别进行。


          【下面是我整理的2023年最全的软件测试工程师学习知识架构体系图】


一、Python编程入门到精通


二、接口自动化项目实战  

三、Web自动化项目实战


四、App自动化项目实战 

五、一线大厂简历


六、测试开发DevOps体系 

七、常用自动化测试工具


八、JMeter性能测试 

九、总结(尾部小惊喜)

生命不息,奋斗不止。每一份努力都不会被辜负,只要坚持不懈,终究会有回报。珍惜时间,追求梦想。不忘初心,砥砺前行。你的未来,由你掌握!

生命短暂,时间宝贵,我们无法预知未来会发生什么,但我们可以掌握当下。珍惜每一天,努力奋斗,让自己变得更加强大和优秀。坚定信念,执着追求,成功终将属于你!

只有不断地挑战自己,才能不断地超越自己。坚持追求梦想,勇敢前行,你就会发现奋斗的过程是如此美好而值得。相信自己,你一定可以做到!

                                

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18198.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SK5代理与IP代理:网络安全中的爬虫利器

一、什么是IP代理与SK5代理&#xff1f; IP代理&#xff1a; IP代理是一种允许用户通过代理服务器进行网络连接的技术。用户请求经由代理服务器中转&#xff0c;从而实现隐藏真实IP地址&#xff0c;保护用户隐私&#xff0c;并在一定程度上突破IP访问限制。常见的IP代理有HTTP…

【李宏毅机器学习·学习笔记】Deep Learning General Guidance

本节课可视为机器学习系列课程的一个前期攻略&#xff0c;这节课主要对Machine Learning 的框架进行了简单的介绍&#xff1b;并以training data上的loss大小为切入点&#xff0c;介绍了几种常见的在模型训练的过程中容易出现的情况。 课程视频&#xff1a; Youtube&#xff1…

【MTK平台】【wpa_supplicant】关于wpa_supplicant_8/src/p2p/p2p_invitation.c文件的介绍

本文主要介绍external/wpa_supplicant_8/src/p2p/p2p_invitation.c文件 这里主要介绍6个方法 1.p2p_invite //p2p邀请调用此方法 2.p2p_invite_send //对p2p_invite方法进行补充 3. p2p_process_invitation_resp 4.p2p_process_invitation_req 5.p2p_build_invitation_re…

Java并发系列之二:悲观锁机制

什么是锁 在并发环境下&#xff0c;会出现多个线程对同一个资源进行争抢的情况&#xff0c;假设A线程对资源正在进行修改&#xff0c;此时B线程此时又对资源进行了修改&#xff0c;这就可能会导致数据不一致的问题。为了解决这个问题&#xff0c;很多编程语言引入了锁机制&…

Python的正则表达式re模块的compile()方法有什么作用?

re模块是Python标准库中的正则表达式模块&#xff0c;它提供了对正则表达式的支持。re.compile()是re模块的一个方法&#xff0c;用于将正则表达式编译成可复用的正则对象。 正则表达式是用来匹配和处理文本模式的强大工具。当你需要在字符串中查找、替换或者提取符合特定模式…

前端学习--vue2--插槽

写在前面&#xff1a; 这个用法是在使用组件和创建组件中 文章目录 介绍简单使用多个插槽省写默认/后备内容作用域插槽常用实例Element-ui的el-table 废弃用法slot attributeslot-scope attribute 介绍 我们在定义一些组件的时候&#xff0c;由于组件内文字想要自定义&#…

python脚本记日志

1、使用RotatingFileHandler&#xff0c;可以实现日志按大小回滚&#xff08;设置&#xff0c;最多备份几个日志文件&#xff0c;每个日志文件最大值&#xff09;&#xff1a; import loggingfrom logging.handlers import RotatingFileHandler # 按文件大小回滚handlerdef ma…

ssh安全远程管理

目录 1、什么是ssh 2、ssh登陆 3、ssh文件传输 1、什么是ssh ssh是 Secure Shell 的缩写&#xff0c;是一个建立在应用层上的安全远程管理协议。ssh 是目前较为可靠的传输协议&#xff0c;专为远程登录会话和其他网络服务提供安全性。利用ssh 协议可以有效防止远程管理过程中…

蓝桥杯上岸每日N题 第五期(山)!!!

蓝桥杯上岸每日N题第五期 ❗️ ❗️ ❗️ 同步收录 &#x1f447; 蓝桥杯Java 省赛B组(初赛)填空题 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#x1f64f; 距离蓝桥杯省赛倒数第3天 ❗️ ❗️ ❗️ 还没背熟模…

机器学习笔记之优化算法(二)线搜索方法(方向角度)

机器学习笔记之优化算法——线搜索方法[方向角度] 引言回顾&#xff1a;线搜索方法从方向角度观察线搜索方法场景构建假设1&#xff1a;目标函数结果的单调性假设2&#xff1a;屏蔽步长 α k \alpha_k αk​对线搜索方法过程的影响假设3&#xff1a;限定向量 P k \mathcal P_k …

git 命令总结

一、本地分支和仓库里的分支不同步&#xff08;本地看不到最新的分支&#xff09; 1.使用 git fetch origin 或者git remote update origin --prune命令更新 2.git branch -r 查看 即可 二、git 合并代码 1. git 如何把分支代码合并到master 1.1 首先切换到分支 git checkou…

leetcode做题笔记48

给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 思路一&#xff1a;直接旋转 void rotate(int** matrix, int matrixSize, int…

0基础学习VR全景平台篇 第76篇:全景相机-圆周率全景相机如何直播推流

圆周率科技&#xff0c;成立于2012年&#xff0c;是中国最早投身嵌入式全景算法研发的团队之一&#xff0c;亦是全球市场占有率最大的全景算法供应商。相继推出一体化智能屏、支持一键高清全景直播的智慧全景相机--Pilot Era和Pilot One&#xff0c;为用户带来实时畅享8K的高清…

PyTorch代码实战入门

人这辈子千万不要马虎两件事 一是找对爱人、二是选对事业 因为太阳升起时要投身事业 太阳落山时要与爱人相拥 一、准备数据集 蚂蚁蜜蜂数据集 蚂蚁蜜蜂的图片&#xff0c;文件名就是数据的label 二、使用Dataset加载数据 打开pycharm&#xff0c;选择Anaconda创建的pytorch环…

[Vue3] 基础面试 (一)

文章目录 1.Vue 3相对于Vue 2有哪些主要改进2.Vue 3中如何处理组件的Props3.Vue 3中的Composition API是什么, 它与Options API有何不同4.Vue 3中的响应式数据是如何工作的5.Vue 3中的ref和reactive有何区别6.Vue 3中的watchEffect和watch有何区别 1.Vue 3相对于Vue 2有哪些主要…

医疗流程自动化盛行,RPA成为医疗保健行业的重点应用技术

随着我们进入新的科技纪元&#xff0c;机器人流程自动化&#xff08;RPA&#xff09;正快速地改变着我们的游戏规则。简单来说&#xff0c;RPA 就是模仿人类与电子系统的互动&#xff0c;自动化执行重复性的任务和操作序列。 医疗保健领域中&#xff0c;RPA 的应用具备巨大的潜…

《工具箱-VNCServer》配置VNCServer,使用VNCViewer实现局域网内页面共享

VNCServer设置 通过VNCServer配置&#xff0c;与VNCviewer配套使用 1.下载并安装VNCServer 2.邮箱密码注册后用户登录 3.设置VNC密码 4.设置viewer不能控制本机 5.打开VNClicensewiz&#xff0c;选择“Enter a license key …” BQ24G-PDXE4-KKKRS-WBHZE-F5RCA BQ24G-PDXE4-…

vue如何实现打字机效果

参考插件&#xff1a;easy-typer-jshttps://redqueen.gitee.io/typer/#%E7%89%B9%E7%82%B9%EF%BC%88%E4%BC%98%E5%8A%BF%EF%BC%89 或者&#xff1a;vue-type-js 或者要的是chartgpt&#xff1a;效果的&#xff1a; https://blog.csdn.net/yasinshaw/article/details/1298073…

Java中集合容器详解:简单使用与案例分析

目录 一、概览 1.1 Collection 1. Set 2. List 3. Queue 1.2 Map 二、容器中的设计模式 迭代器模式 适配器模式 三、源码分析 ArrayList 1. 概览 2. 扩容 3. 删除元素 4. 序列化 5. Fail-Fast Vector 1. 同步 2. 扩容 3. 与 ArrayList 的比较 4. 替代方案…

服务器介绍

本文章转载与b战up主谈三国圈&#xff0c;仅用于学习讨论&#xff0c;如有侵权&#xff0c;请联系博主 机架型服务器 堆出同时服务百万人次机组 刀型服务器 服务器炸了 比如用户访问量暴增 超过机组的峰值处理能力&#xff0c;进而导致卡顿或炸服&#xff0c; 适合企业的塔式…