Cypress web自動化30-操作窗口滾動條(scrollTo)

前言

web頁面的操作，有些元素不在窗口上顯示，需滑動滾動條才能顯示出來，Cypress 可以使用 scrollTo 操作滾動條的位置。
可以根據窗口的位置來滾動，也可以根據屏幕像素或百分比來滾動。

相關語法

操作 window 窗口對象，窗口上的滾動條，可以直接使用cy.scrollTo()

cy.scrollTo(position)
cy.scrollTo(x, y)
cy.scrollTo(position, options)
cy.scrollTo(x, y, options)
// 正確用法示例
cy.scrollTo(0, 500)                     // Scroll the window 500px down

也可以先定位到元素，滾動到元素的位置

.scrollTo(position)
.scrollTo(x, y)
.scrollTo(position, options)
.scrollTo(x, y, options)
// 正確用法示例
cy.get('.sidebar').scrollTo('bottom')   // Scroll 'sidebar' to its bottom

參數說明：

• position(字符串) 窗口或元素滾動到的指定位置，有效的位置topLeft，top，topRight，left，center，right，bottomLeft，bottom，和bottomRight。
• x（數字，字符串） 距離窗口/元素左側的距離（以像素為單位）或滾動到的窗口/元素寬度的百分比。
• y（數字，字符串） 與窗口/元素頂部之間的距離（以像素為單位）或滾動到的窗口/元素高度的百分比。
• options(對象) 可選項傳遞選項對象以更改的默認行為cy.scrollTo()。

options 選項參數說明

選項	默認	描述
log	true	在命令日志中顯示命令
duration	0	滾動持續時間（以毫秒為單位）
easing	swing	將隨着緩動動畫滾動
timeout	defaultCommandTimeout	命令行默認超時時間 4000毫秒

position 窗口滾動到的指定位置

position 參數將窗口或元素滾動到的指定位置。窗口有效的位置topLeft，top，topRight，left，center，right，bottomLeft，bottom，和bottomRight

使用案例

/**
 * Created by dell on 2020/6/3.
 *  作者：上海-悠悠 交流QQ群:939110556
 */

describe('web滾動窗口案例', function() {
    beforeEach(() => {
          cy.visit('https://www.cnblogs.com/yoyoketang/')

        })

    it("上下拖動", () =>
    {
        // 滾動到窗口底部
        cy.scrollTo('bottom')
        cy.wait(3000)
        // 左下角
        cy.scrollTo('bottomLeft')
        cy.wait(3000)
        // 回到頂部
        cy.scrollTo('top')

    })
    })

x 橫向左右滾動

x 參數控制橫向左右滾動，x參數可以是數字，也可以是字符串，也可以是百分比

        // x 橫向，距離左側100像素，可以是數字100
        cy.scrollTo('100')
        cy.wait(3000)
        // x 橫向，距離左側150像素，可以是字符串150
        cy.scrollTo('150')
        // x 200像素
        cy.wait(3000)
        cy.scrollTo('200px')
        // 按百分比，滾動50%，也就是正中間
        cy.wait(3000)
        cy.scrollTo('50%')

y 縱向上下滾動

y 參數控制縱向上下滾動，y參數可以是數字，也可以是字符串，也可以是百分比

        // y 縱向 上下滾動，往下滾動100像素
        cy.scrollTo(0, 100)
        // 也可以傳字符串
        cy.wait(3000)
        cy.scrollTo('0', '200')
        // 滾動到中間位置 50%
        cy.wait(3000)
        cy.scrollTo('0', '50%')

duration 持續滾動

有些web頁面可以一直拖到底部，到底部后又會刷新出新的頁面來，如果我想持續滾動3秒，可以加 duration 持續時間

/**
 * Created by dell on 2020/6/3.
 *  作者：上海-悠悠 交流QQ群:939110556
 */

describe('web滾動窗口案例', function() {
    beforeEach(() => {
          cy.visit('https://www.jd.com/')

        })

    it("滾動窗口,持續拖動底部", () =>
    {
        cy.scrollTo('bottom', { duration: 3000 })
    })
    })

但是當duration持續時間大於4秒時會發生一個報錯 ：Cypress command timeout of 4000ms exceeded.

cy.scrollTo('bottom', { duration: 6000 })

由於 defaultCommandTimeout 默認超時時間是4000 毫秒，需在 cypress.json配置下，把時間改大一點

{
"defaultCommandTimeout": 30000
}

如果你想在運行結果查看滾動效果，cypress 無法反映快照中任何元素的准確滾動位置,只能自己加wait等待時間查看效果，或者用 .pause() 暫停