如何通过环境变量调整Cypress截图尺寸？现有配置不生效是什么原因？

问题原因 #

你当前代码无法调整截图尺寸的核心问题是参数传位错误：
Cypress的cy.screenshot() 方法中，x/y/width/height 这四个裁剪参数不能直接放在配置根节点，必须嵌套在clip属性下才会生效。你直接放在顶层的裁剪参数会被Cypress忽略，所以始终输出默认视口尺寸的截图。

实现环境变量控制截图尺寸的方案 #

1. 调整Spec文件的截图调用代码 #

把裁剪参数放到clip配置项下，同时读取Cypress环境变量中的宽高值，可同时设置默认值避免参数缺失：

it('displays two todo items by default', () => {
  const captureWidth = Cypress.env('SCREENSHOT_WIDTH') || 400
  const captureHeight = Cypress.env('SCREENSHOT_HEIGHT') || 300
  cy.screenshot({
    capture: 'viewport', // 固定捕获视口区域，避免全屏滚动截图影响裁剪效果
    clip: {
      x: 20,
      y: 20,
      width: captureWidth,
      height: captureHeight
    }
  })
})

2. 运行测试时传入环境变量 #

你可以通过命令行参数的方式传入自定义尺寸，示例命令如下：

# Windows系统（cmd/powershell环境）
npx cypress run --env SCREENSHOT_WIDTH=800,SCREENSHOT_HEIGHT=600

# Mac/Linux系统
CYPRESS_SCREENSHOT_WIDTH=800 CYPRESS_SCREENSHOT_HEIGHT=600 npx cypress run

如果使用Cypress图形界面运行，也可以在cypress.config.js中提前配置环境变量的默认值，或者在图形界面的设置面板中手动修改环境变量参数。

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