You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
describe('一起动',()=>{it('获取输入框,输入文字并按enter键',()=>{consttext='not exist';// type api用法: https://docs.cypress.io/api/commands/type.html#Usagecy.get('input').type(`${text}{enter}`);});it('点击按钮',()=>{cy.get('button').click();});});
describe('test search page',()=>{// 几个 route 路径变量constsearchRoutePath='/api/items/activities?query=*';constdeleteActivityRoutePath='/api/activities/*/items/batch?num_iids[]=*';constundoActivityRoutePath='/api/activities/*/items/undo';functionsearch(keyword){// 将搜索行为和等待搜索返回封装起来cy.fixture('items/activities.json')// 处理mock数据,只返回符合搜索结构的数据.then(data=>data.filter(item=>item.title.indexOf(keyword)!==-1)).as('searchResult');cy.server();cy.route(searchRoutePath,'@searchResult').as('searchRoute');constinput=cy.get('input');input.clear();// 清空输入框内文本input.type(`${keyword}{enter}`);cy.wait('@searchRoute');}before(()=>{// 进行所有测试前,先访问搜索页cy.visit('/activities/search');});it('should show no data tip when search result is empty',()=>{consttext='not exist';search(text);cy.contains(`没有找到关于 ${text} 的结果`);});it('should remove activity from list when clean successful',()=>{search('成功');cy.route('delete',deleteActivityRoutePath,{success: 0,fail: 0,waiting: 0,}).as('deleteActivityResponse');// within是让cy执行的context保持在'.activities-search'这个dom节点内// 默认cy的执行是以上一个cy命令结果作为context// 如 "cy.get('a'); cy.get('span')",cy会在上一个命令找到的'a'标签中查找'span'cy.get('.activities-search').within(()=>{constitems=cy.get('.result-item');items.should('have.length',1);constapplyList=items.get('.apply-list');applyList.should('not.be.visible');// 每个数据项内详细内容区域是隐藏的consttoggleBtn=items.get('.item-apply-count');toggleBtn.click();// 点击显示详细内容区applyList.should('be.visible');applyList.children().should('have.length',1);// 详细内容区内数据只有1条constcleanBtn=cy.contains('退出');cleanBtn.click();// 点击详细内容区里的“退出”按钮cy.wait('@deleteActivityResponse');// 等待“退出”请求返回cy.get('.apply-list').should('be',null);// 退出成功后,详细内容区数据减1,即空});});});
不很久不很久以前
据说某家公司有两位前端,天天撸bug,为啥嘞?只怪测试MM倾人国,轻语哥哥有bug。✧(๑•̀ㅂ•́)و✧ 可是最近两位有点犯愁 Σ(っ °Д °;)っ。测试MM有几次提了紧急bug,都在旁边鼓励他们改bug了,可是线上bug重现排查比较麻烦,而且改了后还发现没改好,惹得测试MM潸然泪下,好生埋汰。怎么办呢?
前端君666某天发现了
E2E
测试神器cypress
后,暗中偷练神功,改bug越来越6,测试MM每天笑着对他说,666你真6,MM好喜欢呀(๑•́ ₃ •̀๑) 另一位前端君555每天面对堆积如山的bug长吁短叹,测试MM提完新bug后都不理他了≡ ̄﹏ ̄≡作为一个追求
代码永无bug
、顺带跟测试MM沟通产品的有理想的前端 (ง •̀_•́)ง,我觉得有必要学习一下怎么使用cypress
来进行E2E
测试,以此来提高代码质量。那么我们来看看怎么入门cypress
测试框架。cypress三问 - 你是谁
cypress
是在mocha
式API基础上构建的一套开箱可用的E2E
测试框架,对比其他测试框架,它提供一套自己的最佳实践方案,无需其他测试工具库,配置方便简单但功能异常强大,可以使用webpack
项目配置,还提供了一个强大的GUI
图形工具。入门简单,上手方便,怎么舒服怎么来呀 (。→‿←。)cypress
GUI方式的测试使用真实浏览器,非GUI方式使用chrome-headless
,不是用模拟方式进行测试,更真实的展现实际环境中的测试过程和结果。cypress三问 - 你有啥优势
cypress有几大自带的强大功能:
only
或者skip
来避免重测测试文件里的所有用例:it.only('只测试这个哟); it.skip('不要测这个');
cypress三问 - 怎么用
安装
yarn add cypress
或者npm install cypress
./node_modules/.bin/cypress install
安装cypress环境(包括GUI工具)配置
yarn cypress[-gui]
或者npm run cypress[-gui]
(中括号意思是可选)来初始化cypress
,生成默认配置和目录万事俱备,测测测
几个必读文档
关于测试覆盖率
目前
cypress
没有内置测试覆盖率统计功能,github上有专门的issue在跟踪这个,后续应该会有。issue上也有几个临时方案,目前我倾向使用chrome
自带的来查看。在GUI打开的测试的浏览器中打开devtools
,切到Sources
, 按下cmd+shift+p
(windows用户按ctrl+shift+p
),输入coverage
,选择重新刷新并统计代码执行覆盖率。那么,high起来
为了高(撩)质(测)量(试)代(M)码(M),high起来。喜欢前端MM的可以手把手教起来了 (¬_¬)
The text was updated successfully, but these errors were encountered: