前端自动化测试 | 青训营笔记

东非不开森
63 阅读5分钟

这是我参加【第五届青训营】笔记创作活动的第16天

什么是自动化测试

  • QA团队对整个系统进行端对端测试
  • 在不同模块集成以后，QA团队对其正常通信和功能进行多维度测试
  • 开发人员通过编码的方式对自己的代码进行正确性校验

实际上

image.png

为什么要自动化测试

image.png

前端为什么要做自动化测试

  1. 统一代码风格
  2. 组件Readme用例化,保持时效性3.有效审视代码中的耦合逻辑
  3. 避免后续迭代影响到历史功能，发布breaking change

前端自动化测试的技术选型

image.png

技术选型

  • Jest + React testing library + Cypress + storybook:
  • 测试框架: Jest(提供一个可运行的环境、测试结构、结果报告、代码覆盖、断言、mocking . snapshot)
  • 测试辅助库: react-testing-library (dom查询，断言和事件的模拟,React18推荐的Ul自动化的集大成测试辅助库)
  • Cypress + storybook: E2E端对端测试，覆盖单元测试不易于覆盖的复杂场景

如何进行前端自动化测试?

image.png

image.png

  • Get:返回查询的匹配节点，如果没元素匹配，则会报错(针对单查如果查到多个也会报错)
  • Query:返回查询的匹配节点，如果没有元素匹配会返回null，但是不会报错(同样针对单查，如果查到多个匹配元素也会报错)
  • Find:返回一个Promise，默认超时时间为1000 ms，如果没有元素匹配或者查找超时，Promise 状态切为reject(同样针对单查，如果查到多个元素,也会返回reject) 。

image.png

  • ARIA(Accessible Rich Internet
  • Applications)是一组属性，用于定义使残障人士更容易访问Web内容和Web应用程序(尤其是使用JavaScript 开发的应用程序)的方法。
  • 通过无障碍属性查询相比通过类名查询减少对代码结构的依赖,使得用例更为强健，不容易被修改。

image.png

  • 如果有默认的 ARIA角色和 label,那么就不去创建新的去覆盖 更详细的隐藏role属性大家可以看W3C对应的提案 (www.w3.org/TR/html-ari…)

image.png

  • 可以分为Jest 和Jest Dom提供，是一组判断当前元素是否符合某种预期的效果
  • Jest提供了一系列基础的断言，类似toBe,not，toEqual等，可以移步jestjs.io/docs/gettin…
  • Jest Dom是 react testing library补充的一系列与DOM相关的特殊断言，可以移步 github.com/testing-lib…

image.png

  • 针对这种场景,React Testing Library提供了两种手段来模拟, fireEvent和userEvent
  • 我们更推荐使用userEvent，相比fireEvent,
  • userEvent更贴切真实场景地模拟了事件,而fireEvent只是调度对应的事件。
  • 我们书写的用例应该尽可能从用户视角来展开,而不是代码层面，这样对于用例本身来说，才是更强健的

image.png

例如click事件，对于fireEvent而言,它只是直接触发了这个元素的click。

image.png

然而在实际的场景中，我们点击一个按钮会有先hover再聚焦的过程，这些事件的触发并不会在 fireEvent中体现出来。userEvent则是在模拟完整的事件流程，我们上面提到的 click事件，它同样也会触发hover等事件效果,更为真实地还原了用户的场景

image.png

对于其他事件,userEvent也是针对事件来一一定制对应的响应函数的，目前支持的有下面的事件，对于还没实现的事件大家可以用fireEvent先替代。 相比之下, fireEvent 支持的就很多了，因为也不需要对事件进行定制

image.png

  • 我们定义了一个组件,它会在500ms后完成加载，显示出"a demo for asynctest"的区域。
  • 对于这个场景,"a demo for async test"并不是在刚加载的时候就存在的，我们使用get或者query是不能查到它的,那我们应该怎么去完成我们的用例呢?

image.png

  • findBy 与getBy的不同在于,它会重复执行回调去查找对应的元素，直到超过默认的1000ms 超时时间。
  • 不过 findBy只能固定查元素，而且超时时间固定，如果我们想测一些特殊的逻辑,或者想自定义超时时间应该怎么做呢?
  • React testing library 还提供有一个waitfor的API可以满足我们这个场 景,findBy其实也是通过getBy 和waitfor来实现的一个常用API

image.png

React testing library 还提供有一个waitfor的API可以满足我们这个场 景, findBy其实也是通过getBy和waitfor来实现的一个常用API

image.png

一些需要长时间执行的任务，可以通过"快进”的方式来完成 对原理感兴趣的同学可以看看 《9 |FakeTimer:如何"快进"测试定时任务?》

image.png

  • 在实际的业务场景中,我们一个文件中往往穿插着各种引用。其中包含一些测试环境没有的API或者全局变量,或者不在我们测试范围内的外部文件，这都是很常见的现象
  • 这些情况我们都需要使用mock来模拟它们进行测试。所以在实际的业务单测中,mock是很重要的测试手段

image.png

image.png

image.png

image.png

自动化测试的持续集成

image.png

image.png

image.png

通过git actions我们可以把用例的执行和覆盖率控制进我们项目的CICD

image.png

avatar
文章
阅读
粉丝