Cypress 你能测试一个元素是否被滚动到_Cypress

Cypress 你能测试一个元素是否被滚动到

cypress

Cypress 你能测试一个元素是否被滚动到,cypress,Cypress,我有一个链接，当点击它会滚动到同一页上的div元素。有没有一种方法可以让我点击一个链接并确定该元素实际上是滚动到的 describe('scrolling.spec.js', () => { it('should scroll to an element.', () => { cy.visit('/home'); cy.get('#calculator-link').click(); //verify that the

我有一个链接，当点击它会滚动到同一页上的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
        ///??
    });

});

是的，你能做到。在使用Cypress时，您总是可以问“我如何在普通JS（或JQuery）中实现这一点”，并且在大多数情况下，您可以在Cypress中应用完全相同的codé。在纯JS中，您可能会得到

getClientRect（）

来检索其父元素的

top

。所以在柏树上也一样

您还可以使用

get（…）.should（“be.visible”）

，因为如果元素不在视图中，则该元素不可见。如果您的元素有一个设置了最大高度的父容器和一个

溢出：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>

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


#容器{
高度：300px；
溢出：滚动；
}
---
---
..... 更多元素
可见
---
..... 更多元素

关于“普通”JS用法的解释：

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);
            });
        })
    })
})

Cypress为您提供了许多可以链接到CY命令之外的断言。例如，

应该（“存在”）

。但是您也可以将回调传递到

should

中，并且该回调将重复，直到达到超时或断言失败为止。在这个回调中，您可以访问从上一个命令生成的JQuery元素。此时，您可以对该对象执行任何操作。

是的，您可以执行此操作。在使用Cypress时，您总是可以问“我如何在普通JS（或JQuery）中实现这一点”，并且在大多数情况下，您可以在Cypress中应用完全相同的codé。在纯JS中，您可能会得到

getClientRect（）