Cypress报错“WebSocket连接建立前已关闭”的配置排查求助

需补充的配置及修复操作 #

• 配置WebSocket代理与跨域放行
  Cypress默认不代理WebSocket请求，需在cypress.config.js中添加代理规则，并关闭浏览器跨域安全限制，避免WebSocket连接被拦截：

  e2e: {
    experimentalSessionAndOrigin: true,
    experimentalSessionSupport: true,
    setupNodeEvents(on, config) {
      // 调整浏览器启动参数，关闭跨域安全
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--disable-web-security');
          launchOptions.args.push('--allow-running-insecure-content');
        }
        if (browser.name === 'electron') {
          launchOptions.preferences.webSecurity = false;
        }
        return launchOptions;
      });
      // 配置WebSocket代理匹配规则
      config.proxy = {
        url: 'https://<proxy URL>',
        match: /^wss:\/\/<proxy URL>\/.*/
      };
      return config;
    }
  }
  

• 规范会话管理的Origin绑定
  使用cy.session()时明确指定会话的origin范围，避免跨Origin跳转后上下文混乱：

  cy.session('keycloak-login', () => {
    cy.visit('/');
    // 完成Keycloak登录操作
    cy.get('#username').type('你的用户名');
    cy.get('#password').type('你的密码');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '生产URL');
  }, {
    validate() {
      cy.visit('生产URL');
      cy.get('[data-testid="user-info"]').should('exist');
    }
  });
  

• 升级Cypress版本
  experimentalSessionAndOrigin等实验特性在旧版本存在已知bug，建议升级到Cypress 12.x及以上版本，避免版本兼容问题导致的WebSocket连接失败。

• 拦截并模拟WebSocket连接（兜底方案）
  若上述配置无效，可在测试中拦截WebSocket请求，手动返回握手成功响应：

  cy.intercept('wss://<proxy URL>', (req) => {
    req.continue((res) => {
      res.statusCode = 101;
      res.headers.upgrade = 'websocket';
      res.headers.connection = 'Upgrade';
    });
  });
  

核心原因 #

手动操作正常是因为浏览器在用户交互场景下的跨域策略、会话处理逻辑与Cypress自动化环境不同，Cypress需要显式配置来适配跨Origin跳转和WebSocket连接的特殊场景。

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