前端自动化测试框架cypress

前端自动化测试框架cypress

图片[1]-前端自动化测试框架cypress-JieYingAI捷鹰AI

自动化测试

为了保障软件质量,并减少重复性的测试工作,自动化测试已经被广泛运用。

自动化测试是一种测试方法,是指使用特定的软件,去控制测试流程,并比较实际结果与预期结果之间的差异。通过将测试自动化,可以把人对软件的测试行为转化为由机器自动执行测试的行为,从而替代大量的手工测试操作,使得测试可以快速,反复的进行。

关于自动化测试,有一个测试金字塔模型,该模型把测试从下到上分为了单元测试、集成测试和UI自动化测试(E2E测试/UI界面测试)。越往金字塔底层,测试成本越低,效率也越高,而越往金字塔的顶层,测试成本会逐渐增高,收益也会越低。

图片[2]-前端自动化测试框架cypress-JieYingAI捷鹰AI

UI测试的主要目的是,从软件使用者的角度来检验软件的质量,而UI自动化测试则是以自动化的方式来代替人工执行测试。在测试金字塔模型中,UI层测试是各种测试中投入最大、收益最低、运行最慢的一种。

接口自动化主要包括模块接口测试,子功能模块集成起来的功能模块测试等,目的是为了验证在单元测试的基础上,所有模块集成起来的子系统、子功能是否仍然满足质量目标。

单元测试又称为模块测试,主要针对程序中最小可测试单元(一般指方法,类)的测试,具备投入小、收益产出高的特征,可以较早期地发现代码缺陷,适用于公共函数库的测试。

总之,越往金字塔底层,测试成本越低,效率也越高,而越往金字塔的顶层,测试成本会逐渐增高,收益也会越低。

Cypress简介

图片[3]-前端自动化测试框架cypress-JieYingAI捷鹰AI

图片[4]-前端自动化测试框架cypress-JieYingAI捷鹰AI

Cypress优点

图片[5]-前端自动化测试框架cypress-JieYingAI捷鹰AI

图片[6]-前端自动化测试框架cypress-JieYingAI捷鹰AI

图片[7]-前端自动化测试框架cypress-JieYingAI捷鹰AI

图片[8]-前端自动化测试框架cypress-JieYingAI捷鹰AI

图片[9]-前端自动化测试框架cypress-JieYingAI捷鹰AI

Cypress的局限

1、长期权衡

2、短期折中

Cypress作为一款优秀的开源软件,其提供的多个免费功能已经能够满足绝大多数团队和个人的需求。

安装Cypress

npm install cypress --save-dev

or

yarn add cypress --dev

图片[10]-前端自动化测试框架cypress-JieYingAI捷鹰AI

Cypress 元素定位

evernotecid://F9E7509D-5E80-4FD3-87E1-A1340229FCB4/appyinxiangcom/27675019/ENResource/p145

图片[11]-前端自动化测试框架cypress-JieYingAI捷鹰AI

Cypress专有选择器

data-cy
cy.get('[data-cy=submit]').click()
 data-test
cy.get('[data-test=submit]').click()
 data-testid
cy.get('[data-testid=submit]').click() 

id选择器

cy.get('#account').click()

class类选择器

cy.get('.form-control').click()

attributes属性选择器

cy.get('[input[id = "account"]]').click()

:nth-child(n)选择器

cy.get(tbody > tr:nth-child(1) > th')

Cypress.$定位器

Cypress.$('#account') 
// 等价于 
cy.get('#account')

Cypress 页面元素基本操作方式

图片[12]-前端自动化测试框架cypress-JieYingAI捷鹰AI

// 搜索定位元素
.get(selector) 

// 搜索定位元素
.contains(selector) 

// 搜索定位元素
.find(selector) 

// 方法用来获取DON元素的子元素
.children() 

// 用来获取DOM元素的所有父元素
.parents() 

// 用来获取DOM元素第一层元素
.parent() 

// 用来获取DOM元素的所有同级元素
.siblings() 

// 用来获取指定DOM对象的第一个元素
.first() 

// 用来获取指定DOM对象的最后一个元素
.last() 

// 用来匹配DOM对象紧跟着的下一个同级元素
.next() 

// 用来匹配给定的DOM对象的所有同级元素
.nextAll() 

// 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止
.nextUntil() 

// 用来匹配给定DOM对象紧跟着的上一个同级元素
.prev() 

// 用来匹配给定的DOM对象之前的所有同级元素
.prevAll() 

// 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止
.prevUntil() 

// 用来遍历数组及其类似结果
.each() 

// 用来在元素或者数组中的特定索引处获取DOM元素。类似于Jquery中nth:child()
.eq() 

Cypress 常见操作

图片[13]-前端自动化测试框架cypress-JieYingAI捷鹰AI

访问某个 link

//访问百度
cy.visit('httpf://www.baidu.com)

获取当前页面 URL

//获取页面地址
cy.url();
cy.url().should("contain", "baidu");

刷新页面

// 等同于 F5
cy.reaload();
// 等同于 ctrl+F5 强制刷新
cy.radload(true);

设置窗口

//在 cypress.json 中添加

{
'viewportWidth':'1000',
'viewportHeight':'600'
}
//运行中设置
cy.viewpoint(1024,768)

前进后退

//后退
cy.go('back)
cy.go(-1)
//前进
cy.go('forward)
cy.go(1)

判断元素是否存在

//判断 check-box 是否可见
cy.get('.check-box).should('be.visible')
//判断元素存在
cy.get('.check-box).should('exist')
//判断元素不存在
cy.get('.check-box).should('no exist')

条件判断

//利用 jquery 来判断元素是否存在
const btn = '#btn'
Cypress.$(btn).length>0{
cy.get(btn).click()
}

获取元素属性值

//获取元素 btn 的文本

cy.get("#btn").then(function () {
  const btnTxt = $btn.text();
  cy.log(btnTxt);
});

清除文本

//清除 input 输入的值
cy.get("div>a").clear();
cy.get("div>a").clear().type();

操作单选/多选按钮

//选中
cy.get("radio").check("us");
//取消选中
cy.get("radio").uncheck("us");

操作下拉菜单

//获取页面地址
cy.get("select").select("下拉选项的值");

cy.get("li").eq(0).click();

操作弹出框

//获取页面地址
cy.get("iframe").then(function ($iframe) {
  //定义要查找的元素
  const $body = $iframe.contents().find("body");
  //在查找到的元素中查找btn并单击
  cy.wrap($body).find("#bin").click();
});

操作被覆盖的元素

cy.get("#btn").click({ force: true });

模拟键盘操作

cy.get("input").type("111");

cy.get("input").type("{enter}");

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
来说点什么吧!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容