什么是组件测试？
关于组件测试的概念，可以直接阅读官方文档（我觉得这篇文档写得非常不错），官方很贴心，还一步一步地教你在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来触发真实的事件。
点击按钮之后按钮隐藏，结果断言报错
可以通过cy.click({ force: true })解决问题
cypress上挂载了jquery、lodash、vueWrapper、vue
我们可以通过Cypress.xx访问这些配置，做一些操作。
想看一些实际demo，了解如何封装指令
我基于idux组件库封装了一套指令库：
可以通过查看该项目，学习如何封装指令，通过实践学习一些指令的使用、断言的使用。
最后，说一下在业务项目中落地前端测试的体验，
- 写测试的工作量还是很大的，对于测试覆盖率要求越高，工作量就越大
- 一开始对指令不熟悉，写起来需要经常去翻文档，后面熟悉了就还好
- 项目有两百多个测试文件，共有一两千条测试用例，跑起来会耗时，需要编写代码支持cypress并发测试
- 边写代码边补充测试帮助我检测出来了很多编码问题，提高了我的编码质量，达到了缺陷左移
- 后续改代码变得胸有成竹，自动化测试代替了手工验证
- Cypress component test实践下来，组件是一层套一层的，你会感受到有些在子组件已经编写用例保障了的特性，在父组件可能又编写了一条用例去覆盖保障了一遍，测试具有重复性。
