当专注于它进行测试时，输入字段被隐藏在横幅后面答案

【问题标题】：Input field gets hidden behind banner when focusing on it to test it当专注于它进行测试时，输入字段被隐藏在横幅后面
【发布时间】：2021-12-21 08:30:09
【问题描述】：

我正在使用 Cypress 为模态框内的表单编写集成测试，其特殊性在于它具有固定的高度、固定的页眉和固定的页脚，这意味着表单可以滚动并始终部分覆盖这些内容。

       <Container>
          <Modal width={width}>
            <Header/> // fixed on top pf modal
            <ModalBody/> // scrolling up and down underneath
            <Footer/> // fixed on bottom of modal
          </Modal>
          <Background onClick={onClose} />
       </Container>

在使用 Cypress 进行测试时，这被证明是有问题的，因为我查询输入数据的输入元素会在我这样做时进入模式的最顶部，这意味着它们会被顶部横幅覆盖并且无法与之交互。

我认为模式和表单的当前设置应该更改为更好的编码和更容易测试，但我想知道现在我是否可以在选择它们后将输入滚动到视图中.

在注释掉的代码中，您可以看到我希望的逻辑类型。我尝试了几种滚动、查询和触发事件的组合，但均无济于事。

it("completes protocol", () => {
    cy.findByRole("button", { name: /Complete protocol/i }).click();

    cy.findByLabelText(/Hours/i).type(10);
    
    // cy.get('input[type="number"]')
    //   .then((elements) => {
    //     elements[0].scrollIntoView({ offset: { top: 100, left: 0 } });
    //     elements[0].type(10);
    //   })
  });

【问题讨论】：

标签： reactjs cypress cypress-testing-library

【解决方案1】：

找到了解决方案！我从未见过这些选项在测试名称之后通过，但事实证明有一个名为“scrollBehaviour”的选项改变了标准的“移动到焦点顶部”行为，并且似乎完美地解决了我的问题。

it("completes protocol", { scrollBehavior: "center" }, () => {
    cy.findByRole("button", { name: /Complete protocol/i }).click();

    cy.findByLabelText(/Hours/i).type(10);
  });

【讨论】：