赞
踩
关于组件测试的概念,可以直接阅读官方文档(我觉得这篇文档写得非常不错),官方很贴心,还一步一步地教你在React、Angular、vue、svelte中集成cypress组件测试。相信看完之后,对组件测试的运作流程和一些原理就会有一个清晰的认识,减少在业务开发过程中纠结该写组件测试还是写e2e测试、纠结类似vuex等第三方库在组件测试中的集成问题。
官方文档: docs.cypress.io/guides/comp…
当你不熟悉Cypress时,第一个方法就是上网搜索,Cypress有着良好的生态和社区活跃度,很多坑别人都已经踩过,很多问题和最佳实践,别人都分享过。举个例子,比方说,你想知道Cypress如何hover一个元素?可以在搜索引擎、stackoverflow、cypress官网、github搜索,都能找到相关的场景及其解决方法。
Cypress默认使用的断言库是Chai,当你不知道如何断言时,你可以查看Chai的文档和示例,学习断言的一些操作。
Cypress指令的ts声明也非常详尽,通过指令、api的ts声明文件,也可以了解到很多的用法
举个例子,假设在页面上有两个popover组件,想要获取到显示的那个,而不是获取隐藏的那个popover组件。可以这么写:
- cy.get(selector)
- .find('[data-cy="demo"]:visible'); // 通过:visible获取显示的元素
-
- cy.get(selector)
- .find('[data-cy="demo"]')
- .eq(0); // 假设目标是第1个,通过eq(0)获取到
-
- cy.within(xx)
- .then(() => {
- cy.get(xx);
- }); // 可以通过within来限制查找范围
- 复制代码
获取元素的方式酷似jq,因为cypress内置了jquery,jquery获取元素的花样有多少,cypress的用法就有多少,时至今日,即使jquery是上个前端时代的产物,但是它依然在某些领域发光发热。
以vue框架为例,可以使用vue test utils的mocks配置,具体用法查看下面文档:
v1.test-utils.vuejs.org/api/options…
cypress默认是开启监听文件变化,自动执行测试用例的,可以通过watchForFileChanges
关闭监听,卡顿会缓解很多。
这个可能是因为同时启动了环境,dev环境端口和test环境端口配置了一致的问题,可以手动覆盖配置下cypress的vite server端口配置
这是因为cypress的事件是模拟的,比如cy.click
、cy.type
都是通过js触发的,它们跟真实的事件会有一些区别,可以通过使用cypress-real-events
这个库的api来触发真实的事件。
可以通过cy.click({ force: true })
解决问题
我们可以通过Cypress.xx
访问这些配置,做一些操作。
我基于idux组件库封装了一套指令库:
可以通过查看该项目,学习如何封装指令,通过实践学习一些指令的使用、断言的使用。
最后,说一下在业务项目中落地前端测试的体验,
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。