Cypress中如何滚动至页面顶部？解决搜索框被遮挡问题

问题场景 #

我在搜索场景下用Cypress模拟API请求返回Mock数据，测试时遇到一个问题：数据渲染完成后，Cypress会自动将页面轻微滚动至底部，导致位于顶部的搜索框被应用头部遮挡，无法执行输入操作。试过设置超大视口高度能解决，但不想用这种方案；cy.scrollTo、cy.get(...).scrollIntoView等滚动方法均无效。

测试代码如下：

it.only("should fetch data on Search and display data", () => {
    const searchText = "product1";
    const apiURL = `products?statuses=[]`;
    
    cy.intercept("GET", apiURL, {
      statusCode : 200,
      body : myMockedResponse
    }).as("getProducts");
    // cy.scrollTo("top", { duration: 500, ensureScrollable : false }); // 无效
    cy.viewport(1000, 10000); // 有效但不推荐
    cy.visit(Product_Path); 
    cy.viewport(1280, 1200);

    cy.wait("@getProducts").then(xhr => {
      cy.wait(2000);

      if (xhr.response) {
        const responseData = xhr.response.body.data;
        const searchedData = responseData.filter(d => d.name.toLowerCase().includes(searchText.toLowerCase())); 

        expect(xhr.response.statusCode).to.equal(200);

        // cy.get("[data-test=search-input]").scrollIntoView(); 无效
        // cy.scrollTo("top"); 无效
        // cy.scrollTo(0, 0); 无效
        cy.get("[data-test=search-input]").type(searchText);

       // 使用searchedData的断言逻辑
      }
    });
  });

搜索框HTML结构：

<div data-test="search-input" class="search-input"><input name="search" placeholder="Search" type="text" class="search-input mr-5 rounded-3 form-control"></div>

可行解决方法 #

1. 直接定位输入框并添加偏移滚动 #

当前代码定位的是搜索框的父容器，改为直接定位内部<input>元素，同时设置滚动偏移量避开固定头部：

// 替换原来的cy.get("[data-test=search-input]").type(searchText)
cy.get("[data-test=search-input] input")
  .scrollIntoView({ offset: { top: -100 } }) // 向上偏移100px，避开头部遮挡
  .focus()
  .type(searchText);

2. 调用浏览器原生滚动方法 #

绕过Cypress自带的滚动API，直接使用浏览器原生scrollTo强制滚动到顶部：

// 在操作输入框前执行
cy.window().then(win => {
  win.scrollTo(0, 0); // 强制滚动到页面最顶部
});
cy.get("[data-test=search-input] input").type(searchText);

3. 修改Cypress滚动行为配置 #

全局或单个测试中修改Cypress的自动滚动行为，让元素滚动到视口顶部而非默认的中心：

// 单个测试内临时设置
Cypress.config("scrollBehavior", "top");

// 或者在定位元素时指定滚动行为
cy.get("[data-test=search-input] input", { scrollBehavior: "top" }).type(searchText);

4. 替换硬等待为元素稳定断言 #

去掉硬编码的cy.wait(2000)，改用等待搜索框可见的断言，确保页面渲染稳定后再操作：

// 替换cy.wait(2000)
cy.get("[data-test=search-input]").should("be.visible");

内容的提问来源于stack exchange，提问作者Demo Guy