如何全局配置Cypress中避免滚动不稳定测试的invoke代码？

下面是几种将你的滚动行为修改代码全局应用到所有测试用例的方法：

方法1：全局beforeEach钩子（最常用） #

在Cypress的全局支持文件中添加beforeEach钩子，确保每个测试用例执行前都会运行这段代码：

1. 打开cypress/support/e2e.js（如果是旧版本Cypress，文件可能是cypress/support/index.js）
2. 添加以下代码：

beforeEach(() => {
  cy.get('html').invoke('attr', 'style', 'scroll-behavior: inherit');
});

这个文件是所有测试的全局入口，beforeEach会在每个测试用例启动前触发，完美实现全局生效的需求。

方法2：拦截页面请求修改初始HTML #

如果想在页面加载的第一时间就设置好滚动行为，避免后续DOM操作的延迟，可以用cy.intercept拦截页面请求并修改返回的HTML内容：

// cypress/support/e2e.js
beforeEach(() => {
  cy.intercept('GET', '/*', (req) => {
    req.continue((res) => {
      // 替换初始的html标签，直接添加样式
      res.body = res.body.replace('<html>', '<html style="scroll-behavior: inherit">');
    });
  });
});

这种方式适合对页面初始状态有严格要求的测试场景，不需要等待DOM加载后再修改样式。

方法3：自定义命令（灵活扩展） #

如果后续需要在特定测试中单独调用，或者想让代码更具可读性，可以先定义一个自定义命令，再在全局钩子中调用：

// cypress/support/e2e.js
// 定义自定义命令
Cypress.Commands.add('disableSmoothScroll', () => {
  cy.get('html').invoke('attr', 'style', 'scroll-behavior: inherit');
});

// 全局钩子中调用
beforeEach(() => {
  cy.disableSmoothScroll();
});

这样既实现了全局生效，也保留了在单个测试中手动调用的灵活性。

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