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, y, 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM