如何用Cypress验证第三方WebSocket消息收发（无需模拟与建联）

核心思路 #

直接利用Cypress原生的cy.intercept()API拦截页面与第三方WebSocket服务之间的消息帧，无需手动建立连接或模拟消息，只需监听并断言消息内容即可。

具体实现步骤及代码示例 #

describe('验证第三方WebSocket消息', () => {
  it('检查是否收到含时间的消息', () => {
    // 访问目标测试页面
    cy.visit('https://websocketstest.com/');

    // 拦截目标WebSocket端点（根据实际地址调整，支持ws/wss）
    cy.intercept('wss://echo.websocket.org/', (req) => {
      req.continue((res) => {
        // 监听消息接收事件
        res.on('message', (rawMessage) => {
          // 若消息为JSON格式则解析，纯文本可直接使用
          const messageContent = JSON.parse(rawMessage);
          // 断言消息包含指定文本
          expect(messageContent).to.contain('time');
        });
      });
    }).as('wsConnection');

    // 触发页面上的WebSocket连接操作（根据页面元素调整选择器）
    cy.get('button:contains("Connect")').click();

    // 等待WebSocket连接建立并接收消息
    cy.wait('@wsConnection').then((interception) => {
      // 可选：从拦截记录中提取消息做二次断言
      const receivedMessages = interception.response?.messages;
      expect(receivedMessages).to.some(msg => msg.includes('time'));
    });
  });
});

关键注意事项 #

• 务必确认第三方WebSocket服务的正确端点地址（区分ws/http和wss/https），可通过浏览器开发者工具的Network面板查看
• 若页面需手动输入端点地址，需先添加输入步骤：cy.get('input#ws-url').type('wss://echo.websocket.org/')
• 无需额外安装第三方库，原生cy.intercept()已支持WebSocket拦截，避免了第三方库的配置复杂度
• 消息格式可能为纯文本或JSON，需根据实际情况选择解析方式

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