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

什么是组件测试？

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

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

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

当你不熟悉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是上个前端时代的产物，但是它依然在某些领域发光发热。

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

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

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

使用cypress之后，电脑卡顿，怎么解决？

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

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

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

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

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

github.com/dmtrKovalen…

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

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

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

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

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

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

github.com/brenner8023…

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

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

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