求助：Chrome 66中Cypress Test Runner运行时应用抖动问题

我之前在项目里也碰到过一模一样的问题！Chrome 66版本配合Cypress运行测试时，页面突然抖动，排查下来确实是滚动条一会儿显示、一会儿隐藏，带动页面布局来回偏移导致的。下面几个方法亲测有效，你可以挨个试试：

方法1：通过CSS强制滚动条状态稳定 #

最直接的思路就是让滚动条要么一直显示，要么彻底隐藏但不影响页面布局，避免它来回切换。

方案A：强制显示垂直滚动条 #

给页面的根容器（比如body）设置固定的垂直滚动，不管内容高度是否超过视口：

body {
  overflow-y: scroll;
}

这样页面宽度会一直预留出滚动条的位置，不会因为内容变化突然收缩或扩展，抖动自然就消失了。

方案B：隐藏滚动条但保留滚动功能 #

如果你不想看到滚动条，也可以用CSS把它隐藏掉，同时保留页面的滚动能力：

/* 针对Chrome/Safari */
body::-webkit-scrollbar {
  width: 0;
}
/* 针对Firefox */
body {
  scrollbar-width: none;
}
/* 针对IE/Edge */
body {
  -ms-overflow-style: none;
}

这个方法不会改变页面布局宽度，也能避免滚动条切换带来的抖动。

方法2：在Cypress中固定视口大小 #

Cypress默认会根据测试内容调整视口，有时候会导致页面高度/宽度变化，触发滚动条状态切换。你可以直接在配置里固定视口尺寸：

在配置文件中全局设置 #

如果是新版Cypress（10+），修改cypress.config.js：

module.exports = {
  viewportWidth: 1280,
  viewportHeight: 720,
  // 其他配置...
}

旧版Cypress可以修改cypress.json：

{
  "viewportWidth": 1280,
  "viewportHeight": 720
}

在单个测试用例中设置 #

如果只需要在特定测试里固定视口，也可以在测试代码里手动设置：

describe('测试用例组', () => {
  beforeEach(() => {
    cy.viewport(1280, 720); // 固定视口大小
    cy.visit('/');
  });

  it('具体测试步骤', () => {
    // 测试代码...
  });
});

方法3：调整测试中的滚动行为 #

有时候抖动是因为Cypress在查找元素时自动滚动页面，导致滚动条频繁触发。你可以在获取元素时强制滚动到视图，或者确保元素一开始就在视口中：

比如，在获取元素时使用scrollIntoView并强制滚动：

cy.get('.target-element').scrollIntoView({ force: true });

另外，也可以在测试前确保页面内容高度不超过视口，比如隐藏一些不必要的动态内容，避免滚动条出现。

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