likes
comments
collection

前端测试之Cypress落地常见问题

作者站长头像
站长
· 阅读数 26

什么是组件测试?

关于组件测试的概念,可以直接阅读官方文档(我觉得这篇文档写得非常不错),官方很贴心,还一步一步地教你在React、Angular、vue、svelte中集成cypress组件测试。相信看完之后,对组件测试的运作流程和一些原理就会有一个清晰的认识,减少在业务开发过程中纠结该写组件测试还是写e2e测试、纠结类似vuex等第三方库在组件测试中的集成问题。

官方文档: docs.cypress.io/guides/comp…

Cypress提供了非常多的指令和用法,如何快速上手和查找相关问题的解决方案和使用文档呢?

当你不熟悉Cypress时,第一个方法就是上网搜索,Cypress有着良好的生态和社区活跃度,很多坑别人都已经踩过,很多问题和最佳实践,别人都分享过。举个例子,比方说,你想知道Cypress如何hover一个元素?可以在搜索引擎、stackoverflow、cypress官网、github搜索,都能找到相关的场景及其解决方法。

前端测试之Cypress落地常见问题

前端测试之Cypress落地常见问题

前端测试之Cypress落地常见问题

前端测试之Cypress落地常见问题

Cypress默认使用的断言库是Chai,当你不知道如何断言时,你可以查看Chai的文档和示例,学习断言的一些操作。

前端测试之Cypress落地常见问题

Cypress指令的ts声明也非常详尽,通过指令、api的ts声明文件,也可以了解到很多的用法

前端测试之Cypress落地常见问题

前端测试之Cypress落地常见问题

页面中可能存在多个具有相同选择器的元素,导致获取不到目标元素

举个例子,假设在页面上有两个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是上个前端时代的产物,但是它依然在某些领域发光发热。

如何在cypress中mock路由、store,伪造全局注入

以vue框架为例,可以使用vue test utils的mocks配置,具体用法查看下面文档:

v1.test-utils.vuejs.org/api/options…

使用cypress之后,电脑卡顿,怎么解决?

cypress默认是开启监听文件变化,自动执行测试用例的,可以通过watchForFileChanges关闭监听,卡顿会缓解很多。

前端测试之Cypress落地常见问题

本地开发同时启动dev环境和test环境时,偶尔环境会出问题,影响开发

这个可能是因为同时启动了环境,dev环境端口和test环境端口配置了一致的问题,可以手动覆盖配置下cypress的vite server端口配置

前端测试之Cypress落地常见问题

某些场景下事件触发效果不是期望的效果,比如复制到剪贴板

这是因为cypress的事件是模拟的,比如cy.clickcy.type都是通过js触发的,它们跟真实的事件会有一些区别,可以通过使用cypress-real-events这个库的api来触发真实的事件。

github.com/dmtrKovalen…

点击按钮之后按钮隐藏,结果断言报错

可以通过cy.click({ force: true })解决问题

cypress上挂载了jquery、lodash、vueWrapper、vue

我们可以通过Cypress.xx访问这些配置,做一些操作。

前端测试之Cypress落地常见问题

前端测试之Cypress落地常见问题

前端测试之Cypress落地常见问题

前端测试之Cypress落地常见问题

想看一些实际demo,了解如何封装指令

我基于idux组件库封装了一套指令库:

github.com/brenner8023…

可以通过查看该项目,学习如何封装指令,通过实践学习一些指令的使用、断言的使用。

最后,说一下在业务项目中落地前端测试的体验,

  • 写测试的工作量还是很大的,对于测试覆盖率要求越高,工作量就越大
  • 一开始对指令不熟悉,写起来需要经常去翻文档,后面熟悉了就还好
  • 项目有两百多个测试文件,共有一两千条测试用例,跑起来会耗时,需要编写代码支持cypress并发测试
  • 边写代码边补充测试帮助我检测出来了很多编码问题,提高了我的编码质量,达到了缺陷左移
  • 后续改代码变得胸有成竹,自动化测试代替了手工验证
  • Cypress component test实践下来,组件是一层套一层的,你会感受到有些在子组件已经编写用例保障了的特性,在父组件可能又编写了一条用例去覆盖保障了一遍,测试具有重复性。