cypress

前言 ui自动化操作页面上的元素，常用的方法就那么几个，输入文本，点击元素，清空文本，点击按钮。 还有一些特殊的checkbox,radio,滚动条等。 .type() 往输入框输入文本元素 <form> <div class="form-group"> <label for="email1">Email address</label> <input type="email" class="form-control action-email" id="email1" placeholder="Email"> </div> <div class="form-group"> <label>Disabled Textarea</label> <textarea class="form-control action-disabled" disabled="disabled"></textarea> </div> </form> cy.get('.action-email') .type('fake@email.com').should('have.value', 'fake@email.com') // .type() with special character sequences .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')

前言 先定位父元素，通过父元素定位子元素 .children() 通过父元素，定位子元素 <ol class="traversal-breadcrumb breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> cy.get('.traversal-breadcrumb') .children('.active') .should('contain', 'Data') .closest() 要获取最近的祖先DOM元素，请使用.closest（）命令。 <ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Events </li> <li class="list-group-item"> <span class="badge traversal-badge">54</span> Friends </li> </ul> cy.get('.traversal-badge') .closest('ul') .should('have.class', 'list-group') .eq() 要在特定索引处获取DOM元素

前言 当我们测试一个web网站的时候，一般最好设置一个baseUrl地址，这样方便维护。 一旦部署环境发生了改变，就不需要去基本里面去查找，秩序更改cypress.json文件即可 cypress.json文件 如果我的web服务部署环境是 http://49.235.x.x:8080 于是在项目的根目录找到cypress.json文件 { "baseUrl": "http://49.235.x.x:8080" } 设置窗口大小 也可以设置浏览器的默认宽和高，如果没设置果，浏览器默认的宽高是 660*1000 可以在 cypress.json 文件中改变这个值 { "baseUrl": "http://49.235.x.x:8080", "viewportWidth": 1280, "viewportHeight": 600 } 后面测试用例如果需要指定特定大小窗口，也可以用cy.viewport()命令去设置 参考前面这篇[https://www.cnblogs.com/yoyoketang/p/12878064.html](https://www.cnblogs.com/yoyoketang/p/12878064.html) 查找测试文件 cypress 默认查找 cypress/integration 下的 js 文件测试用例，查找项目目录也可以自己定义

前言 在页面上点击输入框时，可以用 cy.focused() 判断当前元素是不是聚焦元素。 屏幕截图，这是web自动化经常用到的功能，可以用cy.screenshot()实现 .end() 结束命令链 // cy.end is useful when you want to end a chain of commands // and force Cypress to re-query from the root element cy.get('.misc-table').within(() => { // ends the current chain and yields null cy.contains('Cheryl').click().end() // queries the entire table again cy.contains('Charles').click() }) cy.exec() 退出系统命令 / execute a system command. // so you can take actions necessary for // your test outside the scope of Cypress. cy.exec('echo Jane Lane') .its('stdout').should('contain', 'Jane Lane')

前言 先从第一个登录页面的案例开始，写一个登陆案例的脚本示例，这里以禅道网站登录为例。 登录脚本 脚本实现功能： 输入用户名，断言输入框输入成功 输入密码，断言输入成功 点登陆按钮 断言1 判断页面重定向跳转到首页 断言2 判断页面包含某个文件 断言3 判断登录成功后，cookie存在 login_web.js脚本参考示例 /** * Created by dell on 2020/5/11. * 作者：上海-悠悠 交流QQ群:939110556 */ describe('登陆web网站案例', function() { beforeEach(() => { cy.visit('http://ip:8080/zentao/user-login.html') }) it("登陆案例", function() { // 输入用户名 cy.get('#account').type('admin') .should('have.value', 'admin') // 输入密码 cy.get('[name="password"]').type('***123456') .should('have.value', '***123456') // 提交表单 cy.get('#submit').click() // 判断页面跳转到 /zentao/my/ cy.url().should(