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

行下星暇
114 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

一、本堂课重点内容：

  • 自动化测试的概念
  • 做自动化测试的目的
  • 前端自动化测试的技术选型
  • 如何进行前端自动化测试
  • 自动化测试的持续集成

二、详细知识点介绍：

1. 自动化测试的概念

1.1 理想的软件开发模型

image.png

  • 系统测试

    • QA团队对整个系统进行端对端测试

  • 集成测试

    • 在不同模块集成以后，QA团队对其正常通信和功能进行多维度测试

  • 单元测试

    • 开发人员通过编码的方式对自己的代码进行正确性校验

1.2 现实的软件开发

image.png

2. 做自动化测试的目的

[集成测试和前端自动化测试]

image.png

前端自动化测试的原因

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

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

[技术选型]

image.png image.png image.png

  • Jest + React testing library + Cypress + storybook:

  • 测试框架: Jest(提供一个可运行的环境、测试结构、结果报告、代码覆盖、断言、mocking . snapshot)

  • 测试辅助库: react-testing-library (dom查询，断言和事件的模拟, React18推荐的UI自动化的集大成测试辅助库)

  • Cypress + storybook: E2E端对端测试，覆盖单元测试不易于覆盖的复杂场景

4. 如何进行前端自动化测试

4.1 自动化测试的基本元素

image.png

4.2 查询

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,那么就不去创建新的去覆盖

[断言]

image.png

  • 可以分为Jest和Jest Dom提供,是一组判断当前元素是否符合某种预期的效果

  • Jest 提供了一系列基础的断言，类似toBe, not, toEqual等，可以移步jestjs.io/docs/gettin…

  • Jest Dom是 react testing library补充的一系列与DOM相关的特殊断言，可以移步github.com/testing-lib… 查阅

4.3 事件模拟

image.png

针对这种场景，React Testing Library 提供了两种手段来模拟, fireEvent和userEvent

  • 推荐使用userEvent：
    • 相比fireEvent,userEvent 更贴切真实场景地模拟了事件而fireEvent只是调度对应的事件。

书写的用例应该尽可能从用户视角来展开,而不是代码层面，这样对于用例本身来说，才是更强健的

image.png
  • fireEvent中事件的实现(所有事件通用,直接触发)
  • 例如click事件，对于fireEvent而言,它只是直接触发了这个元素的click。

focusElement：如果可聚焦，触发聚焦事件

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

对于其他事件, userEvent也是针对事件来——定制对应的响应函数的，目前支持的有下面的事件,对于还没实现的事件大家可以用fireEvent先替代。

相比之下, fireEvent支持的就很多了，因为也不需要对事件进行定制

4.4 异步

image.png

我们定义了一个组件，它会在500ms后完成加载，显示出"a demo for asynctest"的区域。

image.png

findBy与gotBy的不同在于,它会重复执行回调去查找对应的元素.直到超过默认的1000ms超时时间。

findBy只能固定查元素．而且超时时间固定．如果我们想测一些特殊的逻辑．或者想自定义超时时间应该怎么做呢?

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

image.png image.png

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

4.5 快进定时任务

image.png

一些需要长时间执行的任务，可以通过"快进”的方式完成

4.6 Mock

image.png

在实际的业务场景中，我们一个文件中往往穿插着各种引用。其中包含一些测试环境没有的API或者全局变量，或者不在我们测试范围内的外部文件，这都是很常见的现象

这些情况我们都需要使用mock来模拟它们进行测试。所以在实际的业务单测中, mock是很重要的测试手段

4.7 快照测试

image.png image.png

4.8 E2E

滚动跳转等难以使用单元测试的场景就需要借助端对端来覆盖

image.png image.png image.png

5. 自动化测试的持续集成

5.1 覆盖率

image.png

5.2 提高覆盖率

  • 通过使用例运行标红区域的逻辑,即可提高覆盖率
image.png

5.3 持续集成

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

三、课后个人总结：

通过本章前端自动化测试的学习，我清楚了自动化测试的目的和概念，在学习过程中，比较难的地方是异步和事件模拟；自动化测试在开发方面的作用很大，使开发更高效，保障功能稳定、高质量。

avatar
文章
阅读
粉丝