Cypress测试模态框内表单时输入框被固定头部遮挡如何解决

架构老林

2026-9-27

解决方案

核心原因是Cypress执行type等交互命令前，默认会自动将目标元素滚动到视口顶部，刚好被模态框固定的Header遮挡，导致无法触发交互。以下是几个可直接使用的临时方案：

方案1：使用Cypress内置滚动偏移（最简便）

直接调用scrollIntoView传入负偏移让元素避开顶部Header，同时执行type时禁用Cypress默认自动滚动：

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

  cy.findByLabelText(/Hours/i)
    // 负top偏移值等于你的Header实际高度即可，作用是让元素滚动到Header下方的可视区
    .scrollIntoView({ offset: { top: -100, left: 0 } })
    // 执行输入时关闭默认自动滚动，避免又滚到顶部被遮挡
    .type(10, { scrollBehavior: false });
});

方案2：直接操作模态框滚动容器（兼容性更高）

如果你的滚动区域是ModalBody而不是全局视口，可以直接计算元素在滚动容器内的位置，手动设置滚动高度：

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

  cy.findByLabelText(/Hours/i)
    .then($input => {
      // 将下方的.modal-body替换为你实际ModalBody的选择器
      const $modalBody = Cypress.$('.modal-body');
      // 计算输入框相对ModalBody的位置，减去Header高度预留空间
      const targetScrollTop = $input.position().top - 100;
      $modalBody.scrollTop(targetScrollTop);
    })
    .type(10, { scrollBehavior: false });
});