.net网站,网站域名解析ip地址,建设工程合同标准版本,wordpress 中国 替代最近在网上搜索前端自动化测试相关的文档#xff0c;但是发现网上的文章都是偏使用#xff0c;没有把一些基础概念说清楚#xff0c;导致后续一口气遇到一些karma、Jasmine、jest、Mocha、Chai、BDD等词汇的时候很容易一头雾水#xff0c;这次一方面整理一下收获的知识一方…最近在网上搜索前端自动化测试相关的文档但是发现网上的文章都是偏使用没有把一些基础概念说清楚导致后续一口气遇到一些karma、Jasmine、jest、Mocha、Chai、BDD等词汇的时候很容易一头雾水这次一方面整理一下收获的知识一方面做个分享。什么是前端自动化测试我个人做题喜欢使用拆解法比如什么是“前端自动化”根据这个题目可知“前端”是在范围/领域”自动化“是方法通过脚本或者工具等各种方式在没有人或者很少人的协助下实现预期的目标的过程“测试”是工作是为了保证软件项目质量的工作。那么前端自动化测试就是在不借助人员帮助下通过使用脚本或者工具等各种方式保证前端项目的项目质量的任务。首先一般人在正式工作中往往由于工作的强度和业务的要求开发项目的时候都没有编写自动化测试脚本的环节。但是在后续过程中职业生涯中参与一些大型项目或者一些使用人很多的第三方库中会对代码质量和功能稳定性的要求越来越高以及多人协作开发的开发集成交付效率更为了提高自己的知识储备和行业竞争力学会前端自动化测试的一些相关基础是很必要的。前端测试分类既然讲了什么是前端自动化测试那么前端测试又分成哪几类呢首先前端测试分类往往指的是涵盖的模块大小从最小的函数方法到整个应用的自动化测试分成了多个模块:1.静态代码分析静态代码分析工具如ESLint、Stylelint、Preitter通过静态分析源代码来检测潜在的错误、代码风格问题和安全漏洞。它们的原理是基于预定义的规则或自定义规则对代码进行扫描并生成相应的警告或错误。这些工具帮助开发人员在编码阶段捕获问题提高代码质量和可维护性。静态代码分析的工作主要是通过配置分析工具配置文件的方式由于Eslint工具十分成熟且网上配置教程众多这里就不展示案例。2.单元测试单元测试——这是在软件开发里常常听到的词单元测试是针对软件系统中最小的可测试单元在前端里通常是函数或方法进行的测试。测试工具如Jest、Mocha、Enzyme使用断言库来验证函数的输入和输出是否符合预期。它们通过提供的测试框架和断言库来运行和验证函数的行为以确保各个单元函数的正确性。下面一个例子通过mocha编写的自动化脚本去测试函数的返回是否符合预期// 目标函数返回的是两数之和function sum(a, b) {return a b;}describe(sum, () {it(返回两数之和, () {const result sum(2, 3);// expect里为测试目标入参为2和3的sum函数// equal里为结果期望返回的是5// 如果实际执行中返回的结果不对则会报错expect(result).to.equal(5);});});3.集成测试再封装一层将已通过测试的单元按设计要求集成起来再进行的测试就是集成测试集成测试用于测试多个组件或模块之间的交互和集成情况。测试工具如Jest、Mocha提供了功能来组织和运行集成测试套件并使用模拟、桩stub或替代mock等技术来模拟外部依赖。它们可确保不同组件之间的集成正常工作并验证系统的整体功能。在前端往往是模拟组件生成到接口集成测试这部分的工作。下面一个例子Mock远程数据到调用组件方法来验证登陆组件是否能正常工作templateLogin reflogin //templatescriptimport { ref } from vueconst au ref()Mock.mock(/login, {code: 200,msg: 成功,data: {token: abcdefg,},});fetch(/api/data, {method: POST,}).then((data) {au.value data.token;});this.$refs.login.setToken({ token })script4.端到端测试咱们继续往上游链路走当我们把集成好的应用放到不同应用终端中进行实际运行测试就是端到端测试端到端测试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(XinXiaoYouexample.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 barassert.typeOf(foo, string) // without optional messageassert.typeOf(foo, string, foo is a string) // with optional messageassert.equal(foo, bar, foo equal bar)AI写代码BDD 风格expect-styleBDD风格有两种风格expect-style和should-style。整体风格可以感觉像是在模仿人类正常进行运算行为从左到右链式调用。import { expect } from chaiconst 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-styleimport { should } from chaiconst 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.PowerAssertPowerAssert是一个基于表达式值的断言库它能够根据表达式的值自动生成详细的断言信息。这使得在断言失败时能够更容易地理解断言失败的原因。PowerAssert 官方入口https://github.com/power-assert-js/power-assert3.JestJest是一款由FaceBook推出的开源项目它本身其实是一个功能强大的测试框架并且内建了断言库。Jest提供了丰富的断言方法如expect它的整体风格 的expect语法类似但是不提供链式调用而是直接调用一个方法进行使用使用expect函数和一系列的匹配器matchers可用于编写简洁易读的测试用例并且与Jest的其他功能集成良好。Jest官方文档入口https://jestjs.io/docs/getting-startedexpect(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.JestJest是一个流行的JavaScript测试框架特别适用于前端应用的单元测试和集成测试。它提供了强大的断言库、Mocking和spying功能、快照测试、异步测试支持等特性。Jest官方文档入口https://jestjs.io/docs/getting-started。2.MochaMocha是一个灵活的JavaScript测试框架适用于前端应用的单元测试和集成测试。它提供了测试运行器和丰富的插件生态系统支持多种断言库和报告器并具有异步测试支持和钩子函数等功能。mocha 官方入口https://github.com/mochajs/mocha。3.CypressCypress是一个前端端到端End-to-End测试框架专注于模拟用户行为和测试应用的交互性。它提供了可视化测试工具、强大的选择器和断言库以及实时重新加载和调试功能。4.EnzymeEnzyme是一个React的测试工具集用于编写和运行React组件的单元测试。它提供了一组实用函数和断言库用于测试组件的渲染、交互和状态变化。5.Vue Test UtilsVue Test Utils是一个Vue.js的官方测试工具库用于编写和运行Vue.js组件的单元测试。它提供了一组工具和API用于创建和操作Vue组件以及进行断言和模拟。【后续将更新————Jest框架基础使用】感谢每一个认真阅读我文章的人礼尚往来总是要有的虽然不是什么很值钱的东西如果你用得到的话可以直接拿走这些资料对于【软件测试】的朋友来说应该是最全面最完整的备战仓库这个仓库也陪伴上万个测试工程师们走过最艰难的路程希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取