2024年新手也能看懂的【前端自动化测试入门】！(1)，三面蚂蚁核心金融部

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

• 4.端到端测试：咱们继续往上游链路走，当我们把集成好的应用放到不同应用终端中进行实际运行测试就是端到端测试；

端到端测试（End-to-End Testing）是模拟真实用户环境中用户操作和行为的测试。测试工具（如 Cypress、Puppeteer、Playwright）通过控制浏览器或模拟用户操作来执行测试。

它们可以模拟用户在浏览器中的交互行为、检查页面元素和状态，并验证整个应用程序的功能和用户体验。

下面一个例子，模拟用户在浏览器中页面正常打开并表单正常渲染：

// 在Cypress测试脚本中，可以使用describe和it来组织测试用例describe('模拟用户提交表单', () => {  // 在每个测试用例之前执行的操作可以放在beforeEach中  beforeEach(() => {    // 打开网页    cy.visit('https://www.example.com')  })
  // 编写测试用例  it('展示页面标题', () => {    // 断言页面标题是否正确    cy.title().should('include', 'Example')  })
  it('模拟表单提交', () => {    // 定位并填写表单    cy.get('#name').type('Xiaoyou Xin')    cy.get('#email').type('XinXiaoYou@example.com')    cy.get('#submit').click()
    // 断言表单提交后的结果    cy.get('#result').should('contain', 'Success!')  })})

• 5.性能测试：锦上添花，当页面的主流程和功能都测试完成以后我们还需要对页面的性能有所追求，这个时候对应用程序的各项性能特征，包括加载速度、资源使用、响应时间等进行测试评估就是性能测试，相关的性能测试工具有如 Lighthouse、WebPageTest等。

它们模拟和测量应用程序在不同网络条件和硬件环境下的性能表现，并提供有关性能瓶颈和优化建议的报告。

通过在chromium中集成chrome拓展程序实现模拟应用程序报告，提供一个Lighthouse插件的页面性能测试方法。

单元化测试入门

现在我们开始正式的开始了解具体的单元测试的几个概念：

断言——断言是在编程中用于检查代码行为是否满足预期的一种机制或语句。

它用于验证代码的某个条件是否为真，并在条件不满足时触发错误或异常。

通俗易懂地说，断言就像是一个自动化的检查员，它会在你编写的代码中的特定位置进行判断，以确保代码的一些假设或预期是正确的。

如果断言的条件为真，那么一切正常，代码会继续执行。但是，如果断言条件为假，也就是代码行为和预期不符，断言会触发一个错误或异常，指示代码存在问题。

举个例子，当我们想要验证sum函数是否按照我们的预期返回结果的时候，我们就可以通过断言机制：

// 一个相加求和的函数function sum(a, b) {  return a + b;}
// 使用Node中的assert断言模块验证 sum 函数的输出是否符合预期/** *  用于程序调试、单元测试中比较前后值是否相同的方法 *  @params {any} actual 实际返回值 *  @params {any} expected 期望返回值 *  @params {string} actual 结果错误时的提示信息 */assert.equal(sum(2, 3), 5, 'sum函数计算错误');

而基于该机制，延伸出了很多断言库以及断言编码风格，现在我列举几个比较主流的断言库以及其特点：

• 1.Chai: Chai 是一个灵活且可扩展的断言库，它提供了多种风格和接口供选择。

Chai断言库本身支持断言风格包括断言式（assert-style）、BDD 风格（expect-style）和应用链式风格（should-style）三种断言风格供用户选择（需要注意的是每种风格的实现原理也并不相同，比如should-style使用到了Es6的Object.getPrototypeOf函数，所以它并不支持IE浏览器）。

这里给大家展示一下三种风格在写法上的区别：

断言式（assert-style）

断言式风格比较接近NodeJs，使用方法接近Node中的模块概念，通过暴露assert模块，然后调用其中的interface接口方法进行使用。

const assert = require('chai').assertconst foo = 'bar'
assert.typeOf(foo, 'string') // without optional messageassert.typeOf(foo, 'string', 'foo is a string') // with optional messageassert.equal(foo, 'bar', 'foo equal `bar`') 

BDD 风格（expect-style）

BDD风格有两种风格：expect-style和should-style。整体风格可以感觉像是在模仿人类正常进行运算行为，从左到右链式调用。

import { expect } from 'chai'const foo = 'bar'    , beverages = { tea: [ 'chai', 'matcha', 'oolong' ] }

expect(foo).to.be.a('string')expect(foo).to.equal('bar')expect(foo).to.have.lengthOf(3)expect(beverages).to.have.property('tea').with.lengthOf(3)

应用链式风格（should-style）

import { should } from 'chai'const foo = 'bar'    , beverages = { tea: [ 'chai', 'matcha', 'oolong' ] }
foo.should.be.a('string')foo.should.equal('bar')foo.should.have.lengthOf(3)beverages.should.have.property('tea').with.lengthOf(3)

完整的API文档和断言库介绍可以去官网：Chai官方入口（https://www.chaijs.com/）

ps:我觉得学习一个工具最好的方式之一就是查阅官方文档，因为任何第三方文章解读都有可能出现信息错误或者版本过时等问题存在，后续我也会贴出对应官网入口。

• 2.PowerAssert：PowerAssert是一个基于表达式值的断言库，它能够根据表达式的值自动生成详细的断言信息。这使得在断言失败时能够更容易地理解断言失败的原因。

PowerAssert 官方入口（https://github.com/power-assert-js/power-assert）

• 3.Jest：Jest是一款由FaceBook推出的开源项目，它本身其实是一个功能强大的测试框架，并且内建了断言库。

Jest 提供了丰富的断言方法，如 expect，它的整体风格 的expect 语法类似，但是不提供链式调用，而是直接调用一个方法进行使用，使用 expect函数和一系列的匹配器（matchers），可用于编写简洁易读的测试用例，并且与Jest 的其他功能集成良好。

Jest官方文档入口：https://jestjs.io/docs/getting-started​​​​​​​

expect(sum(1, 2)).toBe(3);expect(sum(-1, 5)).toBe(4);

• 4…

我们通过刚刚的学习，了解了单元测试的最基本模块，也就是断言，并且简单了解了多种风格的断言库，知道了如何通过使用对应的API和语法对一些测试对象（方法/模块）进行断言。

而在介绍Jest的过程中，我们提到了一个词汇————测试框架。

那么，什么是测试框架呢？

先上定义：测试框架——是一种工具或库，用于帮助开发人员编写、组织和执行测试用例，并提供相关的工具和功能来简化测试过程和结果的分析。

测试框架可以帮助开发人员编写高质量和可靠的测试用例，自动化测试执行，并提供丰富的工具和功能来简化测试过程。

简单的了解，测试框架就是集成了测试需要的相关能力，我们不需要再为了模拟环境、运行代码、配置断言库等底层能力重新开发，可以直接拿来配置好就可以使用的百宝箱。

测试框架通常提供以下功能和特点：

• **1.测试运行器：**测试框架提供测试运行器，用于自动化执行测试用例。

它可以扫描测试文件或目录，并运行其中的测试代码。测试运行器负责调用测试代码，并收集和报告测试结果。

其中Karma就是有名的独立测试运行器，它可以与多个测试框架（包括 Mocha、Jasmine、QUnit等）结合使用，需要注意的是截止于2023-4-28，该运行器已经停止维护。

karma测试运行器入口（https://github.com/karma-runner/karma）。

• ​​​​​​​​​​​​​​2.断言库：测试框架通常内置了断言库，用于编写断言语句来验证代码的行为是否符合预期

• 断言库提供了一组函数和方法，使得编写断言变得简单和直观。

• 3.测试套件和组织：测试框架提供测试套件和组织机制，用于组织测试用例。

测试套件是一组相关的测试用例，可以根据功能、模块或其他逻辑关系进行分组

测试框架提供了一种结构化的方式来组织和管理测试代码。

• 4.测试报告和结果分析：测试框架通常提供测试结果的报告和分析功能。

它可以生成详细的测试报告，显示测试通过或失败的情况，以及测试覆盖率等统计信息。

这些报告和统计信息帮助开发人员了解测试的状态和代码的质量。

模拟和依赖注入：一些测试框架提供模拟和依赖注入的功能，用于模拟外部依赖或对代码中的依赖进行替换。

这使得在测试中可以轻松地模拟数据库、网络请求、文件系统等外部资源，以及对代码的单元进行隔离和测试。

• 5.异步测试支持：许多测试框架提供了对异步代码的支持。

它们可以处理异步操作、Promise、回调函数和定时器等情况，以确保在测试中正确处理异步行为。

接下来就列举几个比较常见的前端测试框架：

• 1.Jest：Jest是一个流行的 JavaScript 测试框架，特别适用于前端应用的单元测试和集成测试。

它提供了强大的断言库、Mocking和 spying 功能、快照测试、异步测试支持等特性。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

入研究，那么很难做到真正的技术提升。**

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！