这是我参与「第五届青训营 」笔记创作活动的第12天
一、本堂课重点内容：
什么是自动化测试、前端自动化测试的技术选型、如何进行前端自动化测试以及前端自动化测试持续集成。
二、详细知识点介绍：
1.什么是自动化测试?
自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程。通常，在设计了测试用例并通过评审之后，由测试人员根据测试用例中描述的规程一步步执行测试，得到实际结果与期望结果的比较。在此过程中，为了节省人力、时间或硬件资源，提高测试效率，便引入了自动化测试的概念。
2.为什么要做自动化测试?
- 统一代码风格
- 组件Readme用例化，保持时效性
- 有效审视代码中的耦合逻辑
- 避免后续迭代影响到历史功能，发布breaking change
3.前端自动化测试的技术选型
- Jest + React testing library + Cypress + storybook:
- 测试框架: Jest (提供一个可运行的环境、测试结构、结果报告、代码覆盖、断言、mocking、snapshot)
- 测试辅助库: react- testing- library (dom查询，断言和事件的模拟，React18 推荐的UI自动化的集大成测试辅助库)
- Cypress + storybook: E2E端对端测试，覆盖单元测试不易于覆盖的复杂场景
4.如何进行前端自动化测试?
查询
- Get:返回查询的匹配节点，如果没元素匹配，则会报错(针对单查如果查到多个也会报错)
- Query:返回查询的匹配节点，如果没有元素匹配会返回null,但是不会报错(同样针对单查，如果查到多个匹配元素也会报错)
- Find:返回一个Promise,默认超时时间为1000 ms,如果没有元素匹配或者查找超时，Promise 状态切为reject (同样针对单查，如果查到多个元素，也会返回reject)。
- ARIA(Accessible Rich Internet Applications)是一组属性，用于定义使残障人士更容易访问Web内容和Web应用程序(尤其是使用JavaScript开发的应用程序)的方法。
- 通过无障碍属性查询相比通过类名查询减少对代码结构的依赖，使得用例更为强健，不容易被修改。
- 如果有默认的ARIA角色和label,那么就不去创建新的去覆盖
断言
- 可以分为Jest和JestDom提供，是一组判断当前元素是否符合某种预期的效果Jest提供了一系列基础的断言，类似toBe, not, toEqual 等
- Jest Dom是reacttesting library 补充的一系列与 DOM相关的特殊断言
事件模拟
- 针对这种场景，React Testing Library提供了两种手段来模拟，fireEvent 和userEvent
- 我们更推荐使用userEvent,相比fireEvent,userEvent更贴切真实场景地模拟了事件，而fireEvent只是调度对应的事件。
- 我们书写的用例应该尽可能从用户视角来展开，而不是代码层面，这样对于用例本身来说，才是更强健的
异步
- 我们定义了一个组件，它会在500ms后完成加载，显示出"a demo for async test"的区域。
- 对于这个场景，'a demo for async test"并不是在刚加载的时候就存在的，我们使用get或者query是不能查到它的，那我们应该怎么去完成我们的用例呢?
- findBy与getBy的不同在于，它会重复执行回调去查找对应的元素，直到超过默认的1000ms超时时间。
- 不过findBy只能固定查元素，而且超时时间固定，如果我们想测一些特殊的逻辑，或者想自定义超时时间应该怎么做呢?
- React testing library还提供有一个waitfor的API可以满足我们这个场景，findBy其 实也是通过getBy和waitfor来实现的一个常用API
- React testing library 还提供有一个waitfor的API可以满足我们这个场景，findBy其实也是通过getBy和waitfor来实现的一个常用API
快进定时任务
些需要长时间执行的任务，可以通过"快进"的方式来完成
mock
- 在实际的业务场景中，我们一个文件中往往穿插着各种引用。其中包含一些测试环境没有的API或者全局变量，或者不在我们测试范围内的外部文件，这都是很常见的现象
- 这些情况我们都需要使用mock来模拟它们进行测试。所以在实际的业务单测中，mock是很重要的测试手段
快照测试
用来保证组件UI的完整
E2E
- 滚动跳转等难以使用单元测试的场景就需要借助端对端来覆盖了
自动化测试的持续集成
覆盖率
- 测试质量的衡量标准之一，告诉我们测试了多少代码。
- 通过使用例运行标红区域的逻辑，即可提高覆盖率
持续集成
- 通过git actions我们可以把用例的执行和覆盖率控制进我们项目的CICD
三、课后个人总结：
通过对本次课程的学习让我认识了前端自动化测试，对前端自动化测试有了大致的了解，让我知道了通过一些技术实现对前端代码进行测试，从而完善代码和功能，从而提高效率减少成本，所以前端自动化测试也是作为一个合格的前端程序员所要掌握的知识。
四、引用参考：
青训营录播-前端自动化测试
