Cypress系列（43）- wait() 命令详解（wait命令的作用）

25-02-06 14

本篇文章给大家谈谈Cypress系列，以及43-wait()命令详解的知识点，同时本文还将给你拓展Cypress系列（25）-submit()命令详解、Cypress系列（31）-title()命令详

本篇文章给大家谈谈Cypress系列，以及43- wait() 命令详解的知识点，同时本文还将给你拓展Cypress系列（25）- submit() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解、Cypress系列（33）- hash() 命令详解等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

Cypress系列（43）- wait() 命令详解（wait命令的作用）
Cypress系列（25）- submit() 命令详解
Cypress系列（31）- title() 命令详解
Cypress系列（32）- url() 命令详解
Cypress系列（33）- hash() 命令详解

Cypress系列（43）- wait() 命令详解（wait命令的作用）

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

作用

等待数毫秒或等待别名资源解析，然后再继续执行下一个命令

语法格式

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: 503false
        },}).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 的响应
})

Cypress系列（25）- submit() 命令详解

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

语法格式

.submit()
.submit(options)

正确写法

cy.get('form').submit()

重点：必须是 form 元素才能调用.submit()

错误写法

// cy 不能直接调用
cy.submit() 

 不是 form 元素
cy.get('input').submit()

options

最简单的栗子

html 代码

<form id="contact">
  input type="text" name="message"button ="submit">Send</button>
form>

测试文件代码

结尾

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

Cypress系列（31）- title() 命令详解

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

作用

获取页面的标题， document.title

语法格式

cy.title()
cy.title(options)

options：只有 timeout 和 log，不再展开讲了

正确写法

cy.title()

实际栗子

测试文件代码

测试结果

再来看看命令在 console 会输出啥

yielded 就是产出的意思

结尾

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

Cypress系列（32）- url() 命令详解

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

作用

获取页面当前的 url
等价于 cy.location('href')

语法格式

cy.url()
cy.url(options)

options：只有 timeout 和 log，不再展开讲了

正确写法

cy.url()

实际栗子

测试文件代码

测试结果

url() 命令在 console 会输出啥

location(href) 命令在 console 会输出啥

结论

可以看到 cy.url() 和 cy.location('href') 是等价效果的
其实还有更多等价的写法，看下面

三种等价的断言方式

测试文件代码

测试结果

结尾

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

Cypress系列（33）- hash() 命令详解

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

作用　　

获取页面当前的 url 的哈希值
等价于 cy.location('hash')

语法格式

cy.hash()
cy.hash(options)

options：只有 timeout 和 log，不再展开讲了

正确写法

cy.hash()

实际栗子

html 代码

    <ul id="users">
        li>
            a href="#/users/8fc45b67-d2e5-465a-b822-b281d9c8e4d1">Fred</a>
    ul>

测试文件代码

测试结果

总结

感觉这方法应该用的不多，如果是普通的链接，是不会返回哈希值的

结尾

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

今天的关于Cypress系列和43- wait() 命令详解的分享已经结束，谢谢您的关注，如果想了解更多关于Cypress系列（25）- submit() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解、Cypress系列（33）- hash() 命令详解的相关知识，请在本站进行查询。

本文标签：