项目质量监测(三)e2e test端到端测试——单元测试和端到端测试 e2e test工具-Cypress Nightwatch TeatCafe Codecov-测试结果可视化
项目质量监测(三)e2e test端到端测试——单元测试和端到端测试 & e2e test工具-Cypress & Nightwatch & TeatCafe & Codecov-测试结果可视化
e2e test
通常对Web应用程序执行两种类型的测试:单元测试和端到端(E2E)测试。
单元测试
在测试中使用“单元”的想法是将代码分解为易于测试的小部件。通常,单元是单个函数,但也可以是类或甚至是复杂的算法。
单元测试的一个关键概念是函数的给定输入应始终产生相同的输出。
例如,如果我们有一个函数添加了两个调用的数字,add
我们可以编写一个单元测试来确保我们作为参数提供的特定数字对总是返回我们期望的输出。
add.spec.js
// Function we want to test
const add = (x, y) => x + y;// Unit test
test("should add two numbers", () => {const result = add(2, 3);expect(result).toBe(5);
});
任何时候我们运行该测试并且它不等于5,我们可以得出一个错误已经输入我们的代码。
组件测试
在大多数Vue.js应用程序中,函数并不真正代表应用程序的原子组成。当然,我们可以对我们的方法进行单元测试,但我们真正关心的是生成的HTML。
因此,Vue.js app测试中的单元是一个组件而不是一个函数。
我们如何测试组件?我们以此为例:
displayGreeting.js
export default {template: `<div>Hello, {{ name }}</div>`,props: ['name']
};
如前所述,对于给定输入(在这种情况下,支柱),单元测试必须返回一致的输出(在这种情况下,文本内容)。
使用像Vue Test Utils这样的库,我们可以在内存中安装Vue组件并创建一个“包装器”对象。然后,我们可以查询包装器以对呈现的HTML进行断言。
displayGreeting.spec.js
import displayGreeting from "./displayGreeting.js";test("displays message", () => {const name = "Michael";const wrapper = mount(displayGreeting, { propsData: { name } });expect(wrapper.text()).toBe(`Hello, ${name}`);
});
单元测试优点:
- 测试运行得很快
- 测试是精确的,允许您识别确切的问题
单元测试缺点:
- 为应用程序的每个方面编写测试都非常耗时
- 尽管单元测试通过,整个应用程序可能仍然无法正常工作
什么是e2e test?
e2e test(End to End test端到端)测试是一种功能测试。与单元测试不同,不会将应用程序分解为更小的部分以进行测试 - 而是测试整个应用程序。
e2e测试与您的应用程序交互,就像真实用户一样。例如,您可以编写一个E2E测试:
- 加载您的网站
- 点击“注册”链接
- 为注册表单中的输入提供一些有效的详细信息
- 单击“注册按钮”。
如果身份验证令牌已存储在Cookie中并且应用程序重定向到配置文件页面,则应通过此测试。
E2E测试优点
- 可以一次隐式测试很多东西
- e2e测试可确保您拥有一个工作系统
e2e测试缺点:
- 运行缓慢 - 通常需要5或10分钟才能运行一个站点
- 测试很脆弱 - 一个无关紧要的变化,如改变组件逻辑,就需要重新设计e2e test了
- 测试无法查明失败的原因
所以,主要的业务流程可能会写E2E,不过规模要小很多,主要目的是:
- 便于给PM展示业务流程
- 便于修改Bug之后的回归
e2e test工具介绍
Cypress——ts编写,只在chrome中运行
官网——https://www.cypress.io/
安装 & 桌面应用
npm install cypress --save-dev
或者直接下载桌面应用:
https://download.cypress.io/desktop
使用方式:
./node_modules/.bin/cypress open// npx npx cypress open// yarn yarn run cypress open
或者添加
package.json
:{"scripts": {"cypress:open": "cypress open"} }
使用npm命令:
npm run cypress:open
Nightwatch——测试工具,跨平台操作
TeatCafe——测试工具,上手简单,配置即用
e2e test案例
Codecov——测试覆盖率,测试结果可视化
Codecov简介
Codecov使用
前端项目中的应用
项目质量监测(三)e2e test端到端测试——单元测试和端到端测试 e2e test工具-Cypress Nightwatch TeatCafe Codecov-测试结果可视化相关推荐
- 项目质量监测(一)——代码质量检查-书写风格、代码规范、高度耦合 代码质量监测之Js检验工具-JSLint、JSHint、ESLint
项目质量监测(一)--代码质量检查-书写风格.代码规范.高度耦合 & 代码质量监测之Js检验工具-JSLint.JSHint.ESLint 5-2 项目质量监测 课程介绍 没有规矩不成方圆,所 ...
- arduino读取水位传感器的数据显示在基于i2c的1602a上_构建Arduino的LoRa远程智能空气质量监测系统...
背景知识视频教程 Arduino分步指南:完整指南 - 国外课栈viadean.com Arduino微控制器:学习Arduino制作项目 - 国外课栈viadean.com 通过构建实际应用程序 ...
- 实时空气质量监测解决方案
一.行业背景 近年来空气质量一直都是大家关注的重点,PM2.5.重工业污染.沙尘暴等无时无刻都在影响着我们的健康.伴随着人们生活水平的提升,对于自身生活环境数据的事实了解意向也越来越强烈.空气质量有没 ...
- 六大项目权威对比 三款互联网电视横评(手机平板点餐系统应用开发)
来源:http://tv.zol.com.cn/469/4691076_all.html 编辑 六大项目权威对比 三款互联网电视横评 2014-08-11 05:57:00 [ 中关村在线 原创 ...
- 【JS 逆向百例】某空气质量监测平台无限 debugger 以及数据动态加密分析
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 文章目录 声明 逆向目标 写在前面 绕过无限 debugger 方法一 方法二 方法三 抓包分析 加密入口 动态 JS 本地改写 ...
- Selenium Web 自动化 - 项目实战(三)
Selenium Web 自动化 - 项目实战(三) 2016-08-10 目录 1 关键字驱动概述 2 框架更改总览 3 框架更改详解 3.1 解析新增页面目录 3.2 解析新增测试用例目录 ...
- 基于 Python 的全国空气质量监测与可视化分析平台
温馨提示:文末有 CSDN 平台官方提供的学长 Wechat / QQ 名片 :) 1. 项目背景 空气质量优劣程度与一个城市的综合竞争力密切相关,它直接影响到投资环境和居民健康,因此越来越受到政府和 ...
- 链上数据分析—NFT 项目质量评估
一.分析背景 2021年已经接近尾声,回顾今年的 crypto currency 市场,在大洋彼岸,NFT 无疑是最具热点的话题和方向.随着 OpenSea 等平台的崛起,市面上的 NFT 项目也层出 ...
- 学生成绩管理系统软件质量测试,教学质量监测
<安脉教学质量监测>是智慧校园核心应用之一,千锤百炼.几十年磨一剑,体现了几千家一线学校教学质量精细分析需求,已积累几千万条的学业数据,涉及符合学校需求的应用统计指标多,报表.报告全,分析 ...
- 使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格
使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量.统一项目代码风格 Eslint 代码检查,编辑器启用 Eslint 之后,不符合规范的会自动进行 ...
最新文章
- 【iOS10 SpeechRecognition】语音识别 现说现译的最佳实践
- oracle11g快速入门习题集答案——oracle11g快速入门
- IsPostBack原理
- (3.2)HarmonyOS鸿蒙双击事件
- arcgis出界址点成果表_界址点成果表打印
- module.exports与exports
- ArcGIS水文分析实战教程(3)DEM数据准备
- 企业运行助推器——力软工作流引擎
- [Docker Swarm集群+图形化界面Visualizer笔记记录]
- Android安卓手机版Kindle字体修改
- C++转erlang后感想
- java计算机毕业设计民航售票管理系统源代码+数据库+系统+lw文档
- kubevirt 存储 网络 监控
- 【转贴】【管理】生存奥秘诙谐解说
- 学术-几何:黑森错觉
- 华为、董明珠纷纷站队“京鱼座”,京东IOT实力不容小觑
- Linux解压tar.gz文件
- 高校计算机课程建设研讨会通知,大学计算机教改与课程建设研讨会召开
- android 字母path动画,Android动画 - PathMeasure打造不一样的动画
- Amos--方差估计与假设检验