最近很多小伙伴都在问Cypress系列和38-go()命令详解这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展Cypress系列（28）-scrollTo()命令详解、Cypres
最近很多小伙伴都在问Cypress系列和38- go() 命令详解这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展Cypress系列（28）- scrollTo() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解、Cypress系列（33）- hash() 命令详解等相关知识，下面开始了哦！
本文目录一览：- Cypress系列（38）- go() 命令详解（compress命令）
- Cypress系列（28）- scrollTo() 命令详解
- Cypress系列（31）- title() 命令详解
- Cypress系列（32）- url() 命令详解
- Cypress系列（33）- hash() 命令详解
Cypress系列（38）- go() 命令详解（compress命令）
如果想从头学起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
作用
在浏览器历史记录中，访问前一个或后一个 URL
语法格式
cy.go(direction)
cy.go(direction,options)
options：只有 timeout 和 log，不再展开讲了
正确格式
// 相当于单击浏览器左上角的后退←按钮 cy.go("back") 相当于单击浏览器左上角的前进→按钮 cy.go("forward")
实际栗子
相当于单击浏览器左上角的后退←按钮 cy.go(-1 相当于单击浏览器左上角的前进→按钮 cy.go(1)
测试文件代码
结尾
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：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系列（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系列和38- go() 命令详解的讲解已经结束，谢谢您的阅读，如果想了解更多关于Cypress系列（28）- scrollTo() 命令详解、Cypress系列（31）- title() 命令详解、Cypress系列（32）- url() 命令详解、Cypress系列（33）- hash() 命令详解的相关知识，请在本站搜索。
本文标签：
