前端E2E测试略详解(以cypress为例)
上一篇文章很简略的介绍了E2E测试的一些框架,本文从相对更详细的层面进行整理
E2E测试 (by cypress):
cypress安装
npm install cypress --save-dev
cypress启动
./node_modules/.bin/cypress open
推荐将启动命令配置在package.json的scripts中,命名为e2e
cypress自定义设置
cypress默认有推荐配置,我们可根据业务需求进行一些配置的覆盖。
配置创建方式:在根目录中创建cypress.json,常用内容如下:
{"viewportWidth": 1440,"viewportHeight": 960,"chromeWebSecurity": false,"fixturesFolder": "test/cypress/fixtures","integrationFolder": "test/cypress/integration","pluginsFile": "test/cypress/plugins","screenshotsFolder": "test/cypress/screenshots","videosFolder": "test/cypress/videos","supportFile": "test/cypress/support","requestTimeout": 10000,"defaultCommandTimeout": 10000,"baseUrl": "http:/***:****"
}
测试流程
1. 确定要测试的流程
以“添加员工”为例,流程为:登录——>点击添加员工进入添加员工界面——>填写员工信息——>点击保存完成添加——>等待跳转员工管理页面,检验表格中是否存在新增员工的数据
2. 明确流程中涉及操作的元素
- 登录:用户名输入框、密码输入框(无法测试手机或图片验证码,可以选择使用cookies)
- 点击添加员工:添加员工按钮
- 填写员工信息:手机号输入框、姓名输入框、分支按钮与分支弹窗、邮箱输入框、民族选择框与选项面板、性别选择框与选项面板、出生日期输入框
- 保存员工信息:保存按钮
- 检验添加成功与否:员工信息表格组件
3. 给操作元素确定标记
用户名输入框:data-test-input_username
密码输入框:data-test-input_password
添加员工按钮:data-test-btn_add
手机号输入框:data-test-input_phonenumber
姓名输入框:data-test-input_name
分支按钮:data-test-btn_branch
分支弹窗:data-test-selector_branch
邮箱输入框:data-test-input_email
民族选择框:data-test-select_nation
民族选项面板:data-test-option_nation
性别选择框:data-test-select_sex
性别选项面板:data-test-option_sex
出生日期输入框:data-test-input_date
保存按钮:data-test-btn_save
员工信息表格:data-test-table_staff
4. 编写该流程测试用例
it('add staff', function() {cy.get('[data-test-btn_add]').click({force: true});cy.wait(1000)cy.get('[data-test-input_phonenumber]').type(phoneNumber)cy.get('[data-test-input_name]').type(userName)cy.get('[data-test-btn_branch]').click();cy.get('[data-test-selector_branch]').contains('PC组').prev().click();cy.get('[data-test-selector_branch]').contains('确 定').click();cy.get('[data-test-input_email]').type(email)cy.get('[data-test-select_nation]').click()cy.get('[data-test-option_nation]').eq(0).click()cy.get('[data-test-select_sex]').click()cy.get('[data-test-option_sex]').eq(0).click()cy.get('[data-test-input_date]').find('input').type('2017-08-08{enter}');cy.get('[data-test-btn_save]').click()cy.get('[data-test-table_staff]').should('contain', userName).and('contain', phoneNumber)})
5. 开发过程中给相应元素进行标记
<Button type="primary" data-test-btn_add>添加员工</Button>
<Input data-test-input_phonenumber v-model.trim="form.mobilePhone.number" @change="handleMobilePhoneChanged" v-loading="mobiePhoneInChecking" size="small">
<Input data-test-input_name v-model.trim="form.name" size="small" maxlenth="20"></Input>
...
6. 开发完成后运行e2e测试
npm run dev
npm run e2e
点击测试文件
e2e测试成本与收益
成本分析:
- cypress安装极为简单,且仅需修改少量配置即可集成到项目中,使用方式也很简洁;
- 工作流程和需要操作的元素是正常开发工作都要考虑的,几乎不算增加成本;
- 给操作元素确定标记在参见命名规范和确定操作元素的基础上可以较为轻易的完成;
- cypess的e2e测试语法与单元测试语法相同,学习成本较低,编写测试用例较为简单;
- 在开发过程中给涉及操作的元素加上标记是很容易的,只需要额外付出很少的时间就能完成,但由于标记无法自动删除,因此会略微增加文件体积;
- cypress运行简单,操作便捷,所增额外成本较少。
总的来说,相较于不使用e2e测试的项目开发,集成e2e测试的成本是很低的。
收益分析:
- e2e测试可以替代人工进行流程测试,节省人力成本,在多次测试情况下收益更为显著;
- 使用e2e测试可以定期监测线上项目,及时发现问题,这在之前是没有的过程,线上项目的问题都是让用户直接发现反馈,如果能在一些用户遇到之前就能先发现并解决,无疑能起到很好的效果。
成本收益对比
综上分析,集成e2e测试的成本是比较低的,而收益较为明显,因此在项目中集成e2e测试是利大于弊的。
关于一些问题的解答
1. 为什么要打点?
①使用打点获取元素稳定性最高;
②打点后编写测试用例更便捷;
③打点过程也是对流程的整理;
④通过打点可以在业务代码开发完成就可以编写测试用例。
2. e2e测试的缺点?
①测试稳定性不高,偶尔会因为其他因素导致测试流程失败(如网路超时);
②出现bug只能得到测试不通过的信息,但对出现bug的原因无法追溯。
3. 选用cypress进行e2e测试有什么问题?
①cypress基于chromenium,暂不支持其他型号浏览器的测试,无法测试浏览器兼容性;
②cypress控制台没有给出操作时长数据,不能测试代码性能;
③当项目实现方式(UI组件变化、组件结构变化等)出现变化时,可能导致一些预期打点位置不再适合或无法进行打点,需要根据更改后的结构对出现问题的组件重新处理。
前端E2E测试略详解(以cypress为例)相关推荐
- 前端技术之_CSS详解第五天
前端技术之_CSS详解第五天 一.行高和字号 1.1 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的. <!DO ...
- 软件测试——性能测试、压力测试、负载测试等详解
软件测试--性能测试.压力测试.负载测试等详解 1. 总述 先看博客:性能测试.负载测试.压力测试 区别(博主的行文很清晰,很努力地在举例子). 压力测试.负载测试都是性能测试. 压力测试是一种破坏性 ...
- 前端技术之_CSS详解第三天
前端技术之_CSS详解第三天 二.权重问题深入 2.1 同一个标签,携带了多个类名,有冲突: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 助创cms众筹 php,【教程】助创cms众筹系统完整测试流程详解
原标题:[教程]助创cms众筹系统完整测试流程详解 这两年提到互联网金融,不得不提的一个词语:众筹.的确相比飘忽不定的股市和频发跑路P2P,众筹具备低风险,收益高,周期短等各方面的优势.为了帮助更多朋 ...
- WEB网站压力测试教程详解
WEB 网站压力测试教程详解 Web 服务处于分布式计算的核心位置,它们之间的交互通常很难测试.分布式开发.大型的开发者团队以及对代码日益组件化的期望都有可能使 Web 服务的开发变得越来越容易隐藏错 ...
- 2048游戏英雄榜java_2048技巧 2048游戏排行榜挑战方法攻略详解
2048技巧 2048游戏排行榜挑战方法攻略详解 目前很多的小伙伴们都比较关注2048游戏中的排行榜,想啊哟知道自己的分数有多少排名. 下面就来和大家说下排行榜挑战方法攻略技巧详解. 2048排行榜挑 ...
- 倩女手游经验计算机,倩女幽魂手游怎么快速升级 新手升级攻略详解
倩女幽魂手游的公测已经开启啦!相信大家上了游戏第一件事就是快速的冲级,那么在倩女幽魂手游中要怎样升级呢?就让4399熊猫来为你带来倩女幽魂手游新手升级攻略详解~ 在倩女幽魂手游中获得经验的方法大致可以 ...
- 《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
- 乖离性暗机器人_乖离性百万亚瑟王超级妖 暗机器人攻略详解
乖离性百万亚瑟王超级妖 暗机器人攻略详解97973-手游网小编为大家分享乖离性百万亚瑟王超级妖 暗机器人攻略详解,详细讲解乖离性百万亚瑟王攻略,希望这篇攻略能帮到大家 本攻略是97973-原创,转载请 ...
最新文章
- 扩增子统计绘图8网络图-MENA
- redis value最大值_Redis 的 maxmemory 和 dbnum 默认值都是多少?对于最大值会有限制吗?...
- python get score gain_什么是“熵和信息增益”?(What is “entropy and information gain”?)...
- vscode中设置.mina语法高亮
- camvid数据集介绍_深度学习图像数据集介绍(MSCOCO)
- VSCode的连Linux远程开发碰到的坑解决
- Observer(观察者)--对象行为型模式
- JDBC 出现references non-existing project XXX, launch configuration问题的解决办法
- 设计模式--策略模式
- 黄子韬现身助力公益 百度推出听障儿童手语翻译小程序
- EJB3.0框架实例----区分有状态bean和无状态bean
- javascript 高级程序设计_所以 JavaScript 到底是什么?我居然懵了????
- Saas架构设计之离线应用
- Tomcat配置优化(一)
- 图书管理系统项目导入
- 修改Firefox收藏夹位置
- 2.4G无线麦克风无线音频传输模块
- 城镇水务系统碳减排路径|雨水系统
- ChatGPT横空出世,让人们看到了AI的更大创造力,聚光灯再度打到了OpenAI的身上
- 孙陶然:公司要与员工分享