如何在Cypress中检测滚动跳转按钮？循环测试遇报错求解决

问题根源 #

你代码里的let targetEl = cy.get($submenuItem).invoke('attr', 'href');是错误的——Cypress的所有命令都是异步的，返回的是Chainable对象，不是直接的href字符串。当你把这个对象传给cy.get(targetEl)时，Cypress内部会尝试把它当作选择器解析，而Chainable对象没有toLowerCase方法，就触发了你看到的报错。

正确实现方式 #

要获取href的字符串值，必须用.then()来处理异步结果，同时可以去掉不必要的cy.wait(500)，改用Cypress的自动等待机制来确保元素加载/滚动完成：

cy.get(".subnav_item").each(($submenuItem) => {
  // 用then获取href的字符串值
  cy.wrap($submenuItem).invoke('attr', 'href').then((targetSelector) => {
    cy.wrap($submenuItem).click();
    // 验证目标元素可见，Cypress会自动等待元素出现
    cy.get(targetSelector).should('be.visible');
    // 可选：验证元素是否在视口内（确保滚动到位）
    cy.get(targetSelector).should(($el) => {
      const rect = $el[0].getBoundingClientRect();
      expect(rect.top).to.be.lessThan(Cypress.config('viewportHeight'));
      expect(rect.bottom).to.be.greaterThan(0);
    });
  });
});

关键优化点 #

• 用cy.wrap($submenuItem)替代重复的cy.get($submenuItem)，更高效且避免重复查询DOM
• 通过.then()获取异步的href值，确保拿到的是字符串选择器
• 去掉硬编码的cy.wait(500)，依赖Cypress的自动等待机制，测试更稳定
• 可选的视口验证，确保滚动确实定位到了目标元素（不只是元素可见）

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