Cypress.io: 无论如何要测试特定的滚动量？

Question

想知道是否有某种方法可以在一定范围内测试滚动量Cypress.io。

更具体

从页面顶部开始，按按钮
页面向下滚动到一定高度
测试滚动高度在一定范围内是否正确

我的尝试： 我认为最好的方法是测试将要测试的当前 div 不在 phone 屏幕的可视区域内。然后向下滚动，使其可见。

cy.get('#angular-projects').should('not.be.visible') // div #angular-projects
cy.get('#developer-projects').click() // button
cy.get('#angular-projects').should('be.visible')

想知道是否可以通过 mocha, chai, 如果没有 cypress 变通

Answer 1

您可以使用 cy.window() 获取 window 对象，然后构建您的断言，检查 scrollY 是否等于您的预期。

像这样的东西应该测试滚动距离顶部是否在 300 到 500 像素之间（closeTo 的第一个参数指定你想要的值，第二个是你想要接受的误差范围）：

cy.window().then(($window) => {
  expect($window.scrollY).to.be.closeTo(400, 100);
});

Answer 2

这是另一个改编：

// * Ability to Test scroll position of window :)
cy.window().then((win) => {
  win.scrollTo(0, 1000);
});

cy.window()
  .its("scrollY")
  .should(($scrollY) => {
    // expect($scrollY).to.have.value(0);
    expect($scrollY).to.be.closeTo(0, 0);
  });

Cypress.io: 无论如何要测试特定的滚动量？

Cypress.io: Anyway to test for specific scroll amount?

javascript

mocha.js

ecmascript-5

chai

cypress