javascript - 如何使用 Cypress 测试网页已禁用滚动？

Question

也许这很简单，但我的 Cypress测试无法测试锁定滚动功能。
所以我有这个 React设置的模态组件document.body.style.overflow = 'hidden'挂载时(仅限客户端)
我有以下 Cypress的测试套件:

  it('page cant scroll when modal is open', () => {
    cy.get('[data-testid="button"]')
      .first()
      .click();

    cy.window().scrollTo('bottom');
    
    // scroll should be disabled
    cy.window()
      .its('scrollY')
      .should('equal', 0);

    // cy.get('[data-testid="modal"]')
    //   .scrollTo('bottom')
    //   .its('scrollY')
    //   .should('not.equal', 0);
  });

Error message: Timed out retrying after 4000ms: expected 802 to equal 0看起来 Cypress 能够滚动 window即使在手动滚动页面时这是不可能的。
知道可能是什么问题吗？
OP 的编辑:以编程方式滚动页面仍然有效( window.scrollTo() )。 overflow属性隐藏滚动条，但这并不意味着滚动功能实际上被阻止(除了简单的用户交互)
我被建议使用另一种方法来测试滚动卡住 pagedown和 pageup键导航。使用上述键将被阻止在实际页面上，用户将无法滚动。

  it('page cant scroll when modal is open', () => {
    cy.get('[data-testid="button"]')
      .first()
      .click();

    cy.get('body').type('{pagedown}');

    cy.window()
      .its('scrollY')
      .should('equal', 0);

    cy.get('[data-testid="overlay"]').click();

    cy.get('body').type('{pagedown}');

    cy.window()
      .its('scrollY')
      .should('not.equal', 0);
  });

与前面的代码示例一样，此代码段也可以引发错误。 Timed out retrying after 4000ms: expected 46 to equal 0 .

Answer 1

您可以通过设置 overflow 来禁用网页上的滚动行为。属性(property)到hidden像这样window.document.body.style.overflow = 'hidden' .
假设 React模态组件集document.body.style.overflow = 'hidden'正如你之前提到的。
你可以断言 scrolling未通过 one-liner 启用像这样:

cy.window().then(($el) => expect($el.document.body.style.overflow).to.eq('hidden'));