如何通过编程方式在Cypress.io中添加并使用Chrome扩展

以下是针对性的排查和解决步骤：

• 确保扩展路径绝对且正确
  不要依赖相对路径，用Node.js的path.resolve()生成绝对路径，避免不同运行环境下的路径解析问题。比如在cypress.config.ts中导入path模块，直接基于当前配置文件所在目录生成路径：

  const extensionPath = path.resolve(__dirname, './path/to/your/extension-folder');
  

  注意路径要指向包含manifest.json的扩展根目录，如果是打包后的.crx文件，直接指向该文件即可。

• 正确配置Browser Launch参数
  除了--load-extension，还要添加启用扩展和适配CI环境的参数，完整配置示例：

  import { defineConfig } from 'cypress';
  import * as path from 'path';
  
  export default defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        on('before:browser:launch', (browser, launchOptions) => {
          // 仅针对Chromium系浏览器（排除Electron）
          if (browser.family === 'chromium' && browser.name !== 'electron') {
            const extensionPath = path.resolve(__dirname, './your-extension');
            launchOptions.args.push(`--load-extension=${extensionPath}`);
            // 强制启用扩展模式
            launchOptions.args.push('--enable-extensions');
            // CI环境必备参数，避免沙箱限制
            launchOptions.args.push('--no-sandbox');
            launchOptions.args.push('--disable-dev-shm-usage');
            // Chrome 112+推荐用新无头模式，对扩展兼容性更好
            if (launchOptions.args.includes('--headless')) {
              launchOptions.args = launchOptions.args.map(arg => 
                arg === '--headless' ? '--headless=new' : arg
              );
            }
          }
          return launchOptions;
        });
      },
    },
  });
  

• 验证扩展加载状态
  在测试用例中添加调试代码，确认扩展是否被加载：

  cy.visit('your-test-url').then(() => {
    cy.window().then(win => {
      // 打印已加载的扩展列表
      console.log('Loaded extensions:', win.chrome?.extensions?.getAll());
    });
  });
  

  打开Cypress的开发者控制台，查看输出是否包含你的扩展信息。

• 检查版本兼容性
  确认Cypress版本与Chrome v112兼容，建议使用Cypress 12.x及以上版本，旧版本可能存在Chromium内核适配问题。

• GitHub Actions环境注意事项

  • 确保扩展文件已被正确检出到工作目录，如果扩展是外部资源，需用actions/download-artifact或curl提前下载到指定路径。
  • 不要省略--no-sandbox和--disable-dev-shm-usage参数，否则CI环境下Chrome可能无法正常加载扩展。

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