cypress

前言 web页面上的导航功能，上一页，下一页，重新加载页面，直接访问页面。 cy.go() 使用浏览器的缓存功能，访问上一页，下一页 cy.location('pathname').should('include', 'navigation') cy.go('back') cy.location('pathname').should('not.include', 'navigation') cy.go('forward') cy.location('pathname').should('include', 'navigation') // clicking back cy.go(-1) cy.location('pathname').should('not.include', 'navigation') // clicking forward cy.go(1) cy.location('pathname').should('include', 'navigation') cy.reload() 不使用检测，重新加载页面 cy.reload() // reload the page without using the cache cy.reload(true) cy.visit() 直接通过 url 地址访问页面 cy.visit('https://example.cypress

前言 cy.getCookie() 根据 cookie 的 name 名称，获取对应 cookie 的 value 值 cy.get('#getCookie .set-a-cookie').click() // cy.getCookie() yields a cookie object cy.getCookie('token').should('have.property', 'value', '123ABC') cy.getCookies() 获取浏览器全部cookies cy.getCookies().should('be.empty') cy.get('#getCookies .set-a-cookie').click() // cy.getCookies() yields an array of cookies cy.getCookies().should('have.length', 1).should((cookies) => { // each cookie has these properties expect(cookies[0]).to.have.property('name', 'token') expect(cookies[0]).to.have.property('value', '123ABC') expect(cookies[0]).to.have

前言 在web页面上经常遇到的鼠标事件有：鼠标悬停操作，鼠标右键，鼠标长按，拖拽等操作 trigger() trigger 方法用于在 DOM 元素上触发事件 语法使用示例 .trigger(eventName) .trigger(eventName, position) .trigger(eventName, options) .trigger(eventName, x, y) .trigger(eventName, position, options) .trigger(eventName, x, y, options) 正确用法 cy.get('a').trigger('mousedown') // 触发 mousedown 事件 不正确的用法 cy.trigger('touchstart') // 错误，不能直接用在cy. cy.location().trigger('mouseleave') // 错误, 'location' 不生成 DOM 元素 要求：.trigger() 需要链接到产生 DOM 元素的命令。 参数说明 eventName（字符串） event 在DOM元素上要触发的的名称。 position（字符串） 应该触发事件的位置。该center位置是默认位置。有效的位置topLeft，top，topRight，left，center，right

前言 在 Cypress 中引用窗口和窗口上其他属性的示例 cy.window() 要获取全局窗口对象，请使用cy.window（）命令。 cy.window().should('have.property', 'top') cy.document() To get the document object, use the cy.document() command. 要获取document对象，请使用cy.document（）命令。 cy.document().should('have.property', 'charset').and('eq', 'UTF-8') cy.title() 要获取标题，请使用cy.title（）命令。 cy.title().should('include', 'Kitchen Sink') 来源： oschina 链接： https://my.oschina.net/u/4303307/blog/4277032

前言 Cypress 是如何定位元素的呢？web自动化，定位元素是关键，见过很多学web自动化的小伙伴，一天到晚都停留在定位元素层面。 把大把的时间花在元素定位上，这就导致无法抽出精力去优化脚本，Cypress 的定位元素使用css 选择器，跟 jquery 的定位元素一样。 selenium 虽然有很多定位方法，定位方法越多，也就导致定位失败后，花的时间越多。不如专注学会一种定位，这样更有效率！ cy.get() 使用 get() 定位元素，定位元素用 CSS selectors ，跟 jQuery 一样。 <div class="well"> <button id="query-btn" class="query-btn btn btn-primary"> Button </button> </div> cy.get('#query-btn').should('contain', 'Button') cy.get('.query-btn').should('contain', 'Button') cy.get('#querying .well>button:first').should('contain', 'Button') // ↲ // Use CSS selectors just like jQuery 按 data 属性查找元素，请使用属性选择器进行查询。 cy

前言 Cypress提供了一个很好的测试运行器, 它为你提供了一套可视化结构的测试和断言套件, 很快你也会看到命令, 页面事件, 网络请求等. 当你还没熟练掌握元素定位时，在运行器界面点开探测器，会自动帮我们定位好元素，甚至写好部分代码。 调试 Cypress提供了调试工具来帮你理解一个测试,能够做下面事情的能力: 适时的追溯每一个命令的快照. 查看发生的特殊的页面事件. 接收关于每个命令的额外输出. 在多个命令间向前/后移动. 将命令暂停并且反复的单步调试它们. 当发现隐藏的或者多个元素的时候可视化它们. 让我们使用现有的测试代码看看其中的一些实际操作. 时间旅行 将鼠标悬停在命令日志中的 GET 命令上,会看到右边定位到的元素位置 Cypress自动回溯到该命令解析之时的快照. 此外, 因为 cy.get() 在页面找到了 DOM 元素, Cypress 还突出显示元素并将其滚动到视图中 虽然登录之后，跳转到了一个新的url地址 http://49.235.1.x:8080/zentao/my/ 但是当我们把鼠标悬浮在 GET 上时, Cypress 返回快照被记录时出现的URL. 快照 命令也是交互式的. 继续去点击一下CLICK命令. 注意到它高亮成紫色. 它做了三件值得注意的事… 固定快照 我们现在已经固定了这个快照. 悬浮在其他命令之上将不会返回它们.

前言 接口自动化中最常见的问题就是参数关联：如何把上个接口返回数据传个下个接口当入参。 cy.request() 发请求时，可以用 .as() 方法保存上个接口返回的对象，方便后面的接口调用数据。 cy.request() cy.request() 可以发送 XHR 请求 访问接口地址： https://jsonplaceholder.cypress.io/comments 接口返回数据 [ { "postId": 1, "id": 1, "name": "id labore ex et quam laborum", "email": "Eliseo@gardner.biz", "body": "laudantium enim quasi est quidem magnam voluptate ..." }, { "postId": 1, "id": 2, "name": "quo vero reiciendis velit similique earum", "email": "Jayne_Kuhic@sydney.com", "body": "est natus enim nihil est dolore omnis voluptatem ..." } ..... ] 使用 cy.request() 发get请求，对 response 结果断言 /** * Created by

前言 通常web测试需测下在不同设备，手机上，不同的分辨率显示效果，可以用viewport()方法实现 viewport() 设置不同分辨率查看显示效果 cy.get('#navbar').should('be.visible') cy.viewport(320, 480) // the navbar should have collapse since our screen is smaller cy.get('#navbar').should('not.be.visible') cy.get('.navbar-toggle').should('be.visible').click() cy.get('.nav').find('a').should('be.visible') // lets see what our app looks like on a super large screen cy.viewport(2999, 2999) // cy.viewport() accepts a set of preset sizes // to easily set the screen to a device's width and height // We added a cy.wait() between each viewport change so you can