Cypress系列（35）- root() 命令详解（root is compressed）

25-02-06 14

对于想了解Cypress系列的读者，本文将是一篇不可错过的文章，我们将详细介绍35-root()命令详解，并且为您提供关于Cypress系列（25）-submit()命令详解、Cypress系列（28

对于想了解Cypress系列的读者，本文将是一篇不可错过的文章，我们将详细介绍35- root() 命令详解，并且为您提供关于Cypress系列（25）- submit() 命令详解、Cypress系列（28）- scrollTo() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解的有价值信息。

本文目录一览：

Cypress系列（35）- root() 命令详解（root is compressed）
Cypress系列（25）- submit() 命令详解
Cypress系列（28）- scrollTo() 命令详解
Cypress系列（31）- title() 命令详解
Cypress系列（32）- url() 命令详解

Cypress系列（35）- root() 命令详解（root is compressed）

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

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

作用

获取当根元素

语法格式

cy.root()
cy.root(options)

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

正确写法

// 根元素是<html>
cy.root()

 根元素是<nav>
cy.get('nav').within(($nav) => {
  cy.root() 
})

实际栗子

html 代码

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

测试文件代码

这里调用了两次 root()

直接通过 cy调用
在 .within() 回调函数中获取根元素

测试结果

可以看到， cy.root() 返回的就是 html 元素

而这里返回的是 form 元素

结尾

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

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系列（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的写法

直接写数字，代表 px，但不用加 px
百分比
指定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系列和35- root() 命令详解的讲解已经结束，谢谢您的阅读，如果想了解更多关于Cypress系列（25）- submit() 命令详解、Cypress系列（28）- scrollTo() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解的相关知识，请在本站搜索。

本文标签：