对于Cypress系列感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍25-submit()命令详解，并为您提供关于Cypress系列（27）-scrollIntoView()命令详解、Cypr

对于Cypress系列感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍25- submit() 命令详解，并为您提供关于Cypress系列（27）- scrollIntoView() 命令详解、Cypress系列（28）- scrollTo() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解的有用信息。

• Cypress系列（25）- submit() 命令详解（compress命令）
• Cypress系列（27）- scrollIntoView() 命令详解
• Cypress系列（28）- scrollTo() 命令详解
• Cypress系列（31）- title() 命令详解
• Cypress系列（32）- url() 命令详解

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

如果想从头学起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系列（27）- scrollIntoView() 命令详解

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

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

作用

将指定  DOM 元素滑动到可视视图中的左上角

语法格式

.scrollIntoView()
.scrollIntoView(options)

正确写法

// 将 footer 元素 滚动到视图中
cy.get('footer').scrollIntoView() 

错误写法

 cy 不能直接调用
cy.scrollIntoView('footer') 

 必须是 DOM 元素调用
cy.window().scrollIntoView()

options

实际栗子

html 代码

测试文件代码

测试结果

注意

Cypress 运行的命令快照不会显示滚动的过程，如果要查看滚动的过程，需要用 .pause() 遍历每个命令，或者通过观察测试运行的视频

结尾

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

Cypress系列（28）- scrollTo() 命令详解

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

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

作用

滑动浏览器自带的滚动条、元素的滚动条

语法格式

cy.scrollTo(position)
cy.scrollTo(x,y)
cy.scrollTo(position,options)
cy.scrollTo(x,y,options)

// ---或---

.scrollTo(position)
.scrollTo(x,y)
.scrollTo(position,options)
.scrollTo(x,options)

可以是 cy 直接调用，也可以是 DOM 元素来调用

正确写法

 整个页面往下滑动 500px
cy.scrollTo(0,500)

 滚动 .sidebar 元素到它的底部
cy.get('.sidebar').scrollTo('bottom')  

重点

• 必须是 DOM 元素才能调用 .scrollTo() 
• 可以是针对浏览器窗口
• 也可以是针对有滚动条的元素

错误写法

 不是 DOM 元素
cy.title().scrollTo('My App') 

参数列表

position 位置参数

每个元素都有九个 position，具体可看下图

坐标 x,y

距离 DOM 元素左上角的坐标，x 是横轴，y 是竖轴

options

实际栗子

html 代码

测试文件代码

总结，有三种x,y的写法

1. 直接写数字，代表 px，但不用加 px
2. 百分比
3. 指定px，需要加px

测试结果

结尾

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：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系列和25- submit() 命令详解的分享已经告一段落，感谢您的关注，如果您想了解更多关于Cypress系列（27）- scrollIntoView() 命令详解、Cypress系列（28）- scrollTo() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解的相关信息，请在本站查询。