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

45 阅读2分钟

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

一、本堂课重点内容:

  • 本堂课的知识要点有哪些?

    1. 自动化测试的定义

    2. 为什么要做自动化测试

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

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

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

二、详细知识点介绍:

  • 本堂课介绍了哪些知识点?

什么是自动化测试

编码之后,QA团队对集成后的项目进行正常通信和功能进行多维度测试以及端对端测试。

现实中,研发人员需要完成功能测试,点点点

why?

集成测试保证整体系统功能符合预期,研发角度的自动化测试关注更多的是后续功能的维稳,而不完全本次功能的稳定

目的:保证之后的功能不被其他研发人员破坏等;文档用例化

why?

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

单元测试:针对核心元素,测砖头

E2E测试:针对项目整体,测房子

技术选型

image.png 更推荐react testing library

技术选型:

image.png

how?

自动化测试的基本元素:

  • describe模块是一类用例,
  • test是用例,一组需要验证的逻辑,
  • render渲染元素,
  • const emptyNote = screen.getByRole(...)是查询,
  • expect(emptyNote).toBeEmptyDOMElement()是断言,是对查询元素的预期

image.png

基于什么去查?

  • 除了role
  • 还有标签文本、占位符文本等、input等

隐形ARIA role

image.png 断言分为Jest和Jest Dom

事件模拟推荐使用userEvent,尽量从用户视角展开测试。

异步逻辑的测试:findBy & waitfor

mock模拟引用测试

快照测试:snapshot前后匹配

E2E:滚动跳转等难以单元测试的场景需要端到端

自动化测试的集成

提升覆盖率

持续集成

流水线

三、实践练习例子:

  • image.png

  • 注意DOM元素有与生俱来的role

  • 端到端测试案例 四、课后个人总结:

  • 本章有什么知识点不容易掌握?

    • 之前没写过测试,今天有所了解
  • 什么地方容易与其他内容混淆?

五、引用参考:

  • 我参考了哪些外部博客/笔记/文章?
  • 文章中有什么地方是我参考引用了外部博客/笔记/文章的?