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)，我们将立即处理
权威发布，测试选择不纠结！第15届软件测试行业报告，直击行业发展，把握未来方向！
