Cypress E2E测试视频分辨率过低，无法识别文本求解决方案

针对你在Github Actions中运行Cypress测试时遇到的视频分辨率极低、文本无法辨认的问题，给出以下实用解决建议：

• 强制设置Github Actions Runner的屏幕分辨率
  Github Actions默认runner的系统分辨率可能低于你设置的Cypress视口尺寸，导致录制视频被压缩。在Linux runner环境下，可通过xvfb强制指定高分辨率：

  # 在你的Github Actions workflow文件中添加步骤
  - name: 配置高分辨率显示
    run: |
      sudo apt-get install -y xvfb
      Xvfb :99 -screen 0 2560x1600x24 &
      export DISPLAY=:99
  

• 优化Cypress视频录制参数
  仅调整videoCompression可能不够，结合以下参数提升画质：

  export default defineConfig({
    // ...其他原有配置
    video: true,
    videoCompression: 0, // 0表示无压缩，大幅提升清晰度（会增加文件体积）
    videoFrameRate: 30, // 提高帧率减少画面卡顿模糊
    videoCodec: 'libx264', // 使用H.264编码，平衡画质与兼容性
    e2e: {
      viewportHeight: 1600,
      viewportWidth: 2560,
      // ...其他e2e配置
    },
  });
  

  注：videoCompression取值范围为0-51，0是无压缩，之前设置的1仍有较高压缩比例，直接设为0效果更明显。

• 确保浏览器与Cypress版本兼容
  旧版浏览器可能不支持高分辨率录制，在workflow中指定使用最新版Chrome：

  - name: 安装最新Chrome
    run: sudo apt-get install -y google-chrome-stable
  - name: 运行Cypress测试
    uses: cypress-io/github-action@v6
    with:
      browser: chrome
  

• 验证实际窗口分辨率
  在测试代码中添加日志，确认浏览器实际窗口尺寸是否匹配设置的视口：

  // 在cypress/support/e2e.ts中添加
  beforeEach(() => {
    cy.log(`配置视口尺寸: ${Cypress.config('viewportWidth')}x${Cypress.config('viewportHeight')}`);
    cy.window().then(win => {
      cy.log(`实际窗口尺寸: ${win.innerWidth}x${win.innerHeight}`);
    });
  });
  

  如果实际尺寸与配置不符，说明runner环境仍有分辨率限制，需进一步调整系统显示设置。

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