Question

我有一个链接，单击该链接将滚动到同一页面上的div元素。有没有一种方法可以单击链接并确定该元素实际上已滚动到？

describe('scrolling.spec.js', () => {

    it('should scroll to an element.', () => {

        cy.visit('/home');

        cy.get('#calculator-link').click();

        //verify that the element with id  payment-calculator is scrolled to
        ///??
    });

});

Answer 1

是的，您可以这样做。使用赛普拉斯时，您总是可以问您“我将如何在普通JS（或JQuery）中做到这一点”，在大多数情况下，您可以在赛普拉斯中使用完全相同的编码。在普通JS中，您可能会得到getClientRect()来检索其父元素中的元素top。在赛普拉斯中也是如此。

还可以使用get(...).should("be.visible")，因为如果元素不在视图中，则该元素不可见。如果您的元素具有一个设置了最大高度和overflow: scroll的父容器（仅作为示例，在这种情况下将会有更多的情况），这将适用。

所以请看一下代码：

describe("scroll", () => {
    beforeEach(() => {
        cy.visit("scroll.html")
    })
    describe("by using is.visible", () => {
        it("is.visible fails if not in view", () => {
            cy.get("#toscroll").should("be.visible");
        })

        it("is.visible succeeds if element in view", () => {
            cy.get("#toscroll").then($e => $e[0].scrollIntoView());
            cy.get("#toscroll").should("be.visible");
        })
    })

    describe("by using clientRect", () => {
        it("fails without scrolling", () => {
            cy.get("#toscroll").should($e => {
                expect($e[0].getClientRects()[0].top).lessThan(100);
            });
        })

        it("clientRect should have correct size", () => {
            cy.get("#toscroll").then($e => $e[0].scrollIntoView());
            cy.get("#toscroll").should($e => {
                expect($e[0].getClientRects()[0].top).lessThan(100);
            });
        })
    })
})

它显示了两种可能性。我的html看起来像这样：

<html>
    <head>
    <style>
    #container {
        height: 300px;
        overflow: scroll;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div>---</div>
            <div>---</div>
..... much more elements
            <div id="toscroll">is visible</div>
            <div>---</div>
..... much more elements
        </div>
    </body>
</html>

关于“普通” JS用法的说明：

Cypress为您提供了许多可以通过CY命令链接的断言。例如。 should("exist")。但是，您也可以将回调传递到should中，并将重复该回调，直到达到超时或没有断言失败为止。在此回调中，您可以访问从上一条命令产生的JQuery元素。此时，您可以使用此对象执行任何操作。

Answer 2

根据docs，可以简单地使用链接在cy.get（）后面的 scrollIntoView（）：

cy.get('#SomeId').scrollIntoView()

您可以测试元素是否滚动到

2 个答案: