了解前端自动化测试

前端测试存在的问题

1. 没有时间，写好测试花费的时间可能比写业务花费的时间长
2. 测试没有用，写完永远不会出错
3. 公司有测试部门进行测试，不需要前端测试

公司有测试部门还需要前端测试么？

测试部门进行的是黑盒测试,只是对页面进行片面的测试，只能测到看到的界面，看不到的一些方法测的不是很全面，项目在频繁迭代中，新增的功能和已有功能冲突，测试覆盖不全，可能导致线上Bug。

为什么要用前端测试

• 确保代码质量和可靠性：
  单元测试可以帮助开发人员发现和修复代码中的错误和缺陷。通过编写针对每个单独的函数或组件的测试用例，可以验证其行为是否符合预期，从而增强代码质量和可靠性。
• 提高代码可维护性：
  单元测试可以作为文档和说明来帮助其他开发人员了解代码的预期行为。通过编写清晰、有目的性的测试用例，可以帮助开发团队更好地理解和维护代码。
• 快速反馈和迭代：
  单元测试使得代码的迭代和快速反馈变得更加容易。通过自动运行测试用例，开发人员在修改代码后可以快速获得有关是否引入新错误或破坏现有功能的反馈。
• 节省时间和资源：
  尽管编写和维护单元测试需要一些额外的工作量，但它可以节省大量的时间和资源。通过快速检测和修复代码中的错误，可以避免在后期发现问题并进行繁琐的调试和修复。此外，当代码库变得越来越大和复杂时，拥有一套稳健的单元测试可以节省大量的回归测试时间。

哪些项目适合引入前端测试

1. 公共库类的开发与维护
2. 中长期项目的迭代与维护

测试思想TDD和BDD

TDD（Test Driven Development）测试驱动开发

先编写测试代码，以所有测试代码通过为目的，编写逻辑代码

BDD（Behavior Driven Development）行为驱动开发

先编写逻辑代码，以所有逻辑代码通过为目的，编写测试代码

编写怎样的测试代码

• 导入要测试的函数
• 给函数一个输入
• 定义期望的输出
• 检查函数是否产生预期的输出

输入 -> 预期输出 -> 断言结果

前端测试都有哪些？

• 单元测试（Unit Test）
• 集成测试
• 端到端测试（E2E）

单元测试-白盒

编写单元测试是为了验证小的、独立的代码单元是否按预期工作。一个单元测试通常覆盖一个单个函数、类、组合式函数或模块。单元测试侧重于逻辑上的正确性，只关注应用整体功能的一小部分。

一般来说，单元测试将捕获函数的业务逻辑和逻辑正确性的问题。

Vitest

https://cn.vitest.dev/

Test

https://www.jestjs.cn/

集成测试

对多个模块作为一个整体进行测试，一般用于耦合度较高的函数/组件、经过二次封装的函数/组件、多个函数/组件组合而成的函数/组件等。

集成测试的目的在于，测试经过单元测试后的各个模块组合在一起是否能正常工作。会对组合之后的代码整体暴露在外接口进行测试，查看组合后的代码工作是否符合预期。

目前使用的集成测试方案通常是和框架绑定的

@vue/test-utils

https://test-utils.vuejs.org/guide/

端到端测试（E2E）-黑盒

模拟用户操作的测试。设定一系列操作，测试系统是否能够按照我们设置的步骤正确执行，可以完整测试整个功能的运行

Cypress（只支持测试基于 Chromium 的浏览器和 Firefox）

https://www.cypress.io/