Cypress的局限
1、长期权衡
· 不建议使用Cypress用于网络爬虫，性能测试之目的。
· Cypress永远不会支持多标签测试。
· Cypress不支持同时打开两个及以上的浏览器。
· 每个Cypress测试用例应遵守同源策略
2、短期折中
·目前浏览器支持Chrome，Firefox，Microsoft Edge和Electron
· 不支持测试移动端应用
· 针对iframe的支持有限
· 不能在window.fetch上使用cy.route()
· 没有影子DOM支持。
Cypress作为一款优秀的开源软件，其提供的多个免费功能已经能够满足绝大多数团队和个人的需求。
安装Cypress
npm install cypress --save-dev
or
yarn add cypress --dev
Cypress 元素定位
evernotecid://F9E7509D-5E80-4FD3-87E1-A1340229FCB4/appyinxiangcom/27675019/ENResource/p145
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 页面元素基本操作方式
// 搜索定位元素
.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 常见操作
访问某个 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}");
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
