01什么是自动化测试
02为什么要做自动化测试
03前端自动化测试的技术选型
技术选型
Jest+ React testing library + Cypress + storybook
测试框架: Jest (提供一个可运行的环境、测试结构、结果报告、代码覆盖、断言、mocking
snapshot )
测试辅助库: react-testing-library (dom查询，断言和事件的模拟，React18 推荐的UI自动化的集大成测试辅助库)
8690
Cypress + storybook: E2E 端对端测试，覆盖单元测试不易于覆盖的复杂场景
配置
配置示例仓库: github.com/czm12904337…
仓库: https ://github .com/czm1290433700/test_demo
自动化测试的基本元素
查询
Get: 返回查询的匹配节点，如果没元素匹配，则会报错 (针对单查如果查到多个也会报错)
Query: 返回查询的匹配节点，如果没有元素匹配会返回 null，但是不会报错 (同样针对单查，如果查到多个匹配元素也会报错)
Find: 返回一个 Promise，默认超时时间如果没有元素匹配或者查为 1000 ms，找超时，Promise 状态切为 reject (同样针对单查，如果查到多个元素，也会返回reject)
img
ARIA(Accessible Rich Internet
Applications)是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web应用程序(尤其是使用 JavaScript 开发的应用程序)的方法
通过无障碍属性查询相比通过类名查询减少对代码结构的依赖，使得用例更为强健，不容易被修改
img
如果有默认的 ARIA 角色和 label
那么就不去创建新的去覆盖
更详细的隐藏 role 属性大家可以看
W3C 对应的提案
断言
可以分为 Jest 和 Jest Dom 提供，是一组判断当前元素是否符合某种预期的效果
Jest 提供了一系列基础的断言，类似 toBe，nottoEqual 等，
可以移步 https://jestjs .io/docs/getting-started 查阅
Jest Dom 是 react testing library 补充的一系列与 DOM 相关的特殊断言，
可以移步 https: //github .com/testing-library/jest-dom 查阅
事件模拟
针对这种场景，React Testing Library 提供了两种手段来模拟，
fireEvent 和 userEvent
我们更推荐使用 userEvent，相比 fireEvent
userEvent 更贴切真实场景地模拟了事件，而 fireEvent 只是调度对应的事件
我们书写的用例应该尽可能从用户视角来展开，而不是代码层面，这样对于用例本身来说，才是更强健的
