Cypress 8.3.1 截取元素截图时如何禁止浏览器自动调整尺寸

方案1：给截图方法透传禁用自动调整参数 #

toMatchImageSnapshot 底层调用Cypress原生的 cy.screenshot 方法，可以直接透传配置项禁用自动适配逻辑：

// 可加100ms延迟避免视口切换未完成，非强制
cy.viewport(1440,700).wait(100)
cy.get('xxxx').toMatchImageSnapshot({
  // 固定元素截图模式，避免自动切换视口适配逻辑
  capture: 'element',
  // 禁用Cypress自动缩放截图适配窗口的默认逻辑
  scale: false,
  // 4.x以上版本的cypress-image-snapshot插件需额外添加该参数
  disableAutoResize: true
})

方案2：全局固定浏览器窗口和视口尺寸 #

在cypress.json配置文件中添加以下全局配置，从根源避免浏览器窗口大小自动变化：

{
  // 全局默认视口尺寸，和代码中设置的参数保持一致
  "viewportWidth": 1440,
  "viewportHeight": 700,
  // 固定测试浏览器窗口大小，避免open模式下窗口自动缩放
  "browserWindowWidth": 1440,
  "browserWindowHeight": 800
}

方案3：run模式下指定固定尺寸 #

如果在CI/CD无头模式下运行用例，执行测试命令时直接传入固定尺寸参数：

cypress run --browser chrome --config viewportWidth=1440,viewportHeight=700,browserWindowWidth=1440,browserWindowHeight=800

注意事项 #

• 不要在open模式下手动拖动调整测试浏览器的窗口大小，该操作会直接覆盖代码中的viewport设置
• 如果目标元素尺寸超出设置的1440*700视口，优先对元素做滚动定位后再截图，避免触发Cypress的自动适配逻辑

内容的提问来源于stack exchange，提问作者Vinee-the-Pooh