企业官网建设流程全解析

杭州做网站电话,二级网站怎样做排名,网站开发询价单,网页制作基本教程开发公共平台项目#xff0c;测试资源相对比较少#xff0c;因此对开发者自身而言#xff0c;为了维护项目的稳定性#xff0c;需要对平台做各类测试#xff0c;即使有测试环境#xff0c;但是也很容易缺乏测试场景导致带着bug上线的情况。 因此我们需要做完整自动化测试…开发公共平台项目测试资源相对比较少因此对开发者自身而言为了维护项目的稳定性需要对平台做各类测试即使有测试环境但是也很容易缺乏测试场景导致带着bug上线的情况。因此我们需要做完整自动化测试方案来避免这类常规错误提高平台的可用性和稳定性。这里先简单描述自动化测试的分类单元测试验证独立的单元模块代码或函数是否正常工作集成测试验证多个单元模块间的协同工作UI 测试只针对前端UI部分测试后端数据采用mock方式端到端测试从用户的角度通过机器来模仿用户在真实浏览器中验证应用交互快照测试验证程序的UI变化接下来我们将根据这些测试类如何在项目中落地完整方案。单元测试前端项目主要用的单元测试框架为Jest和Mocha下面就Jest框架如何实现一个单元测试。实现步骤1、安装依赖npm i jest --save-dev# 如果是typescript还需要安装 tsnpm i ts-jest babel-jest --save-dev# 安装类型npm i types/jest --save-dev2、新增测试命令在package.json中scripts新增代码{...scripts: {test: node --experimental-vm-modules node_modules/jest/bin/jest.js,},}3、新增配置文件jest.config.js参考配置如下module.exports {testEnvironment: node,testMatch: [ //匹配测试用例的文件rootDir/test/**/*.test.ts],transform: {^.\\.js$: rootDir/node_modules/babel-jest, // babel编译^.\\.ts$: rootDir/node_modules/ts-jest, // typescript编译},collectCoverage: true}4、编写单元测试代码在根目录下新建测试文件test/sum.test.js标识对a.ts文件做测试代码如下//sum.tsexport const sum (a, b) {return a b;}//sum.test.tsimport { sum } from ../src/sumtest(test two num sum, async () {const res sum(5, 6);expect(typeof res).toBe(number)expect(res).toBe(11)})5、开始自动化测试yarn test或者npm run test然后会出现如下PASS ./sum.test.ts----------|---------|----------|---------|---------|-------------------File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s----------|---------|----------|---------|---------|-------------------All files | 100 | 100 | 100 | 100 |sum.ts | 100 | 100 | 100 | 100 |----------|---------|----------|---------|---------|-------------------Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 0 totalTime: 1.394 s, estimated 3 s简单说明一下上面的表格几个字段作用File标识当前测试的文件Stmts语句覆盖率statement coverage是不是每个语句都执行了Branch分支覆盖率branch coverage是不是每个if代码块都执行了Funcs函数覆盖率function coverage是不是每个函数都调用了Lines行覆盖率line coverage是不是每一行都执行了怎么提高单元测试覆盖率分为两个部分提高代码质量减少代码块的大小减少各类复杂逻辑判断不去测试有依赖性函数如需接口、数据库等提高开发意愿一自动化生成单元测试二采用设置覆盖率指标三是确定单元测试规范哪些模块需要写哪些不需要写集成测试集成测试主要是测试当单元模块组合到一起之后是否功能正常。相比较单元测试只是针对某个函数或方案做单一功能测试集成测试是针对某个功能模块做完整的测试因此在测试粒度上的选择需要开发自己去衡量但是一般的选择如下几种如果有UI展示的一般通过router分割页面粒度去进行测试尽可能的少mock依赖尽量的渲染全子组件如果是库不含JS的则以功能模块为粒度进行测试测试数据尽量丰富且贴近真实数据具体实现步骤其实和单元测试一样只是所写的测试功能比单元测试范围要大且完整。UI 测试相比较后面端到端测试UI测试只是对于前端的测试是脱离真实后端环境的仅仅只是将前端放在真实环境中运行而后端和数据都应该使用 Mock 的。UI 测试在前端上也可以叫组件测试 那么如何实现UI测试其实依旧可以使用Jest、EnzymeseleniumVitest等框架目前都支持将Vue、React等组件进行模拟渲染完成。利用Jest实现对React UI组件测试代码如下// React Home.jsxconst Home (){return (divh1Home/h1/div)};// home.test.jsimport React from react;import { createRoot } from react-dom/client; // createRoot 是React18 新出的特性import { act } from react-dom/test-utils; // react支持测试动作import Home from ../src/pages/home;global.IS_REACT_ACT_ENVIRONMENT truelet root null;let container null;beforeEach(() {// 创建一个 DOM 元素作为渲染目标container document.createElement(div);document.body.appendChild(container);root createRoot(container)});afterEach(() {// 退出时进行清理// root.unmount(container);container.remove();container null;});it(渲染有或无名称, () {act(() {root.render(Home /);});expect(container.textContent).toBe(Home);});当然你依然可以使用Jest去做Vue UI 测试但是Vitest实现在vite项目中更加好用代码如下// Home.vuescript setup langtsdefineProps{ msg: string }()/scripttemplateh1{{ msg }}/h1/template//home.test.jsimport { mount } from vue/test-utilsimport Home from ../src/components/Home.vuetest(mount component, async () {expect(Home).toBeTruthy()const wrapper mount(Home, {props: {msg: Home,},})expect(wrapper.html()).toContain(Home)})快照测试快照测试是属于UI测试的一种分类主要用于区分同样的数据下页面UI展示是否发生变化如果不一样则比较测试结果失败有异常或者功能迭代。针对快照测试详细说明如下快照测试类似于“找不同”游戏。快照测试会给运行中的应用程序拍一张图片并将其与以前保存的图片进行比较。如果图像不同则测试失败。这种测试方法对确保应用程序代码变更后是否仍然可以正确渲染很有帮助。当然在前端中其实并不是比较图片而是比较前后生成的html结构本质上是一个字符串的比较。同理如果一个功能模块针对同样的输入得出的结果是不一样那么也是一种快照测试。利用Jest实现快照测试代码如下基本和UI测试一样// home.test.jsimport React from react;import { createRoot } from react-dom/client;import { act } from react-dom/test-utils;import pretty from pretty;import Home from ../src/pages/home;global.IS_REACT_ACT_ENVIRONMENT truelet root null;let container null;beforeEach(() {// 创建一个 DOM 元素作为渲染目标container document.createElement(div);document.body.appendChild(container);root createRoot(container)});afterEach(() {// 退出时进行清理// root.unmount(container);container.remove();container null;});it(渲染有或无名称, () {act(() {root.render(Home /);});expect(container.textContent).toBe(Home);// 快照对比 这里你可以先把html结构存储一份然后再拿出来对比expect(pretty(container.innerHTML)).toMatchInlineSnapshot(divh1Home1/h1/div);});E2E测试E2E测试也叫端到端测试就是模拟真实环境下用户不同操作行为的测试。目前主要进行E2E测试框架有如下几种puppeteer 一个 Node 库它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chromecypress 现代网络构建的下一代前端测试工具 编写更快、更容易和更可靠的测试Selenium 是开源的自动化测试工具它主要是用于Web 应用程序的自动化测试不只局限于此同时支持所有基于web 的管理任务自动化NightWatch 是一个用于web应用和网站上执行自动化端到端end-to-end测试的集成框架用于主流浏览器中简化编写和执行多种类型地测试程序这几者的区别后面会有专门文章去描述现在我们先利用cypress实现E2E测试代码 以Vue项目为主如下 步骤一安装依赖yarn add cypress -D步骤二新增脚本package.json{scripts: {cypress: cypress open}}步骤三后面按照其提示去添加测试文件比如index.cy.ts然后修改代码如下describe(template spec, () {it(has home text, () {// 访问首页cy.visit(http://localhost:5173/)// 断言是否有 Home 文字cy.contains(Home)})})具体效果如下图当然E2E没有这么简单还有一些点击、输入等事件甚至可以模拟登录等这些详细操作放在后面cypress实战篇去讲解。测试覆盖率了解自动化测试后我们还需要对测试覆盖率进行一个完整的了解。测试覆盖率(test coverage)是衡量软件测试完整性的一个重要指标。掌握测试覆盖率数据有利于客观认识软件质量正确了解测试状态有效改进测试工作。其实上面提到单元测试的时候已经有讲过一些这里再做一个完整都介绍。覆盖率主要分为以下几种代码覆盖率 如上述所说分为几种如行覆盖率、函数覆盖率等需求覆盖率测试所覆盖的需求数量与总需求数量的比值总结自动化测试在前端开发是必不可少的一个环节因为前端是直接面向用户的即使有测试团队支持也难免会出现测试遗漏的场景或者加大测试人力成本。当然不同项目的自动化测试所需要的环节是不一样的根据个人经验建议不同场景采用自动化测试如下开发纯函数库建议写更多的单元测试 少量的集成测试开发组件库建议写更多的单元测试、为每个组件编写快照测试、写少量的集成测试 端到端测试开发业务系统建议写更多的集成测试、为工具类库、算法写单元测试、写少量的端到端测试开发公共平台项目建议写更多的集成测试和完整的端到端测试感谢每一个认真阅读我文章的人礼尚往来总是要有的虽然不是什么很值钱的东西如果你用得到的话可以直接拿走这些资料对于【软件测试】的朋友来说应该是最全面最完整的备战仓库这个仓库也陪伴上万个测试工程师们走过最艰难的路程希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取