为何Cypress中cy.viewport(1280,720)无法更新视口尺寸？

问题核心是Cypress命令的异步执行特性：cy.viewport()是异步命令，你同步调用Cypress.config('viewportWidth')时，视口还没完成更新，所以拿到的是旧的默认值1000。

解决方法1：用cy.then()等待视口更新后获取配置 #

把获取视口宽度的逻辑放到cy.viewport()的then回调里，确保异步命令执行完成后再读取配置：

it('top screenshot', () => {
  cy.viewport(1280, 720)
    .then(() => {
      const viewportWidth = Cypress.config('viewportWidth')
      cy.task('log', `viewportWidth: ${viewportWidth}`) // 此时会正确显示1280
    })
})

解决方法2：全局配置视口（更高效） #

直接在cypress.config.js里设置全局默认视口，这样所有测试都会生效，无需在测试用例或beforeEach中重复设置：

module.exports = defineConfig({
  e2e: {
    viewportWidth: 1280,
    viewportHeight: 720,
    // 其他E2E配置项...
  }
})

设置后，同步读取Cypress.config('viewportWidth')也能拿到正确的1280。

额外检查点 #

如果以上方法仍不生效，排查是否有第三方插件（比如你用的视觉回归插件）在内部覆盖了视口配置，可以查看插件文档或源码，确认是否有强制设置视口的逻辑。

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