持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情
wait作用
等待数毫秒或等待别名资源解析，然后再继续执行下一个命令
语法格式
cy.wait(time)
cy.wait(alias)
cy.wait(aliases)
cy.wait(time, options)
cy.wait(alias, options)
cy.wait(aliases, options)
参数讲解
正确格式
cy.wait(500)
cy.wait('@getProfile')
wait() 命令返回的对象
当传了 time 时
cy.wait() 产生与上一个命令相同的主题
当传了 alias 时
cy.wait() 产生一个对象，其中包含 XHR 的 HTTP 请求和响应属性
等待一个别名的栗子
it.skip('栗子1', function () {
cy.server()
cy.route({
url: '**/login',
status: 503,
response: {
success: false,
data: 'Not success'
},
}).as("login")
cy.get("input[name=username]").type(username)
cy.get("input[name=password]").type(`${password}{enter}`)
// 等待请求的响应
cy.wait('@login').then((res) => {
// 针对响应进行断言
expect(res.status).to.eq(503)
expect(res.responseBody.data).to.eq('Not success')
expect(res.responseHeaders).to.have.property('x-token', 'abc-123-foo-bar')
})
});
等待别名数组的栗子
当将别名数组传递给 cy.wait() 时，Cypress 将等待所有请求在给定的 requestTimeout 和 responseTimeout 内完成
cy.server()
cy.route('users/*').as('getUsers')
cy.route('activities/*').as('getActivities')
cy.route('comments/*').as('getComments')
cy.visit('/dashboard')
cy.wait(['@getUsers', '@getActivities', '@getComments']).then((xhrs) => {
// xhrs现在将是匹配的XHR的数组
// xhrs[0] <-- getUsers 的响应
// xhrs[1] <-- getActivities 的响应
// xhrs[2] <-- getComments 的响应
})
then作用
- 在 Cypress 中，保存一个值或者引用的最好方式是使用闭包
- then() 就是 Cypress 对闭包的一个典型应用
- then() 返回的是上一个命令的结果，并将其注入到下一个命令中
语法格式
.then(callbackFn)
.then(options, callbackFn)
参数说明
- options： 只有 timeout，4000ms
- callbackFn： 回调函数，需要将上一个命令的结果作为参数进行传递
实际栗子
then 回调函数最简单的两种写法
第一种是箭头函数，第二种就是普通声明函数的方式
通过 then 和 should 比较文本是否相等
如果想从头学起Cypress，可以看下面的系列文章哦
and作用
- 创建一个断言，断言将自动重试，直到它们通过或超时
- 和 should() 一个用法
语法格式
.and(chainers)
.and(chainers, value)
.and(chainers, method, value)
.and(callbackFn)
参数说明
- chainers： 断言器
- value： 需要断言的值
- method： 需要调用到的方法
- callbackFn： 回调方法，可以满足自己想要断言的内容；且总是返回前一个 cy 命令返回的结果，方法内的 return 是无效的；会一直运行直到里面没有断言
and() 返回的结果
在大多数情况下，.and() 返回与上一个命令相同的结果
cy
.get('nav') // 返回 <nav>
.should('be.visible') // 返回 <nav>
.and('have.class', 'open') // 返回 <nav>
但是，某些 chainer 会改变返回的结果
cy
.get('nav') // 返回 <nav>
.should('be.visible') // 返回 <nav>
.and('have.css', 'font-family') // 返回 'sans-serif'
.and('match', /serif/) // 返回 'sans-serif'
简单的栗子
对同一结果操作的栗子（button 元素）
cy.get('button').should('have.class', 'active').and('not.be.disabled')
chainer 改变返回结果的栗子
html 代码
<li>
<a href="users/123/edit">Edit User</a>
</li>
cypress 代码
cy
.get('a')
.should('contain', 'Edit User') // 返回的是 <a>
.and('have.attr', 'href') // 返回的是 href 的值
.and('match', /users/) // 返回的是 href 的值
.and('not.include', '#') // 返回的是 href 的值
method + value 参数的栗子
断言 href 属性值是否等于 /users
cy
.get('a')
.should('have.class', 'active')
.and('have.attr', 'href', '/users')
