如何在Cypress中滚动到页面最顶部

Question

我正在尝试使用我自己的搜索数据来获取 api 和模拟数据。下面是我的 cypress 代码。

在我的用户界面中，应用程序标题栏下方页面顶部附近有一个搜索框。问题是在获取数据并渲染后，cypress 自动将页面滚动到底部一点，发生的情况是搜索栏被应用程序标题栏覆盖。因此，不再可能在搜索框中输入内容。

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 }); // not working
    cy.viewport(1000, 10000); // this is working
    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]").type(searchText);

       // assertions using searchedData
      }
    });
  });

所以，我尝试将页面的视口高度设置为非常长的视口高度以适应所有内容（当它不适合视口时），就像非常疯狂的值 - 10000。并且它正在工作。但是，我不想使用它。

所以，我找到了scrollTo并尝试了它。不工作。我需要什么？

Answer 1

您应该能够在搜索输入上使用

.scrollIntoView()

，这必须是一个两步序列，其中

.type()

位于单独的链中。

cy.get("[data-test=search-input]").scrollIntoView()  // unsafe to chain further commands
cy.get("[data-test=search-input]").type(searchText)