How to test web-socket requests in Cypress.

[sreenarayan]

I need to intercept a web-socket connection, For this particular functionality(If I click download file button , web-socket request will trigger) this will generate auth_token cookie also. I need to establish web socket connection with auth_token cookie. And validate the web-socket messages as a success.

My script : The error I'm receiving is handshake. couldn't able to establish the connection.

it("Verify Zone geom file download functionality", () => {
// Click the download file button
cy.get('.dwnld-files-section-geom-img').click();
cy.get('.dwnld-geom-files-section > :nth-child(1) > p').click();

    cy.wait(5000); 
  
    // Get the authentication token
    cy.getCookie("auth_token_demo").then((cookie) => {
      const auth_token_demo = cookie.value;
      console.log(`Auth token: ${auth_token_demo}`);
  
      // Establish WebSocket connection
      cy.window().then(win => {
        const WebSocket = win.WebSocket;
        const wsConnection = new WebSocket("wss://URL/v1");
  
        wsConnection.onopen = () => {
          console.log('WebSocket connection established');
          
          // Send authentication token
          const message = {
            service: "zonegeomfile",
            action: "url",
            data: {
              requestId: "ZONEGEOMFILES#" + Math.random().toString(36).substring(7),
              authToken: auth_token_demo
            }
          };
          console.log('Sending message:', message);
          wsConnection.send(JSON.stringify(message));
        };
  
        wsConnection.onmessage = (event) => {
          try {
            const eventData = JSON.parse(event.data);
            console.log('Received message:', eventData);
  
            // Validate the received message
            expect(eventData.service).to.equal('zonegeomfile');
            expect(eventData.action).to.equal('url');
            expect(eventData.data.requestId).to.exist;
            expect(eventData.data.s3Url).to.be.a('string').and.match(/^https:\/\/zonehaven-geom-files-demo\.s3\.amazonaws\.com\//);
  
            // Download the file
            cy.request(eventData.s3Url).then(response => {
              expect(response.status).to.equal(200);
            });
  
            // Close the WebSocket connection
            wsConnection.close();
          } catch (err) {
            console.error('Error parsing message:', err);
          }
        };
  
        wsWebSocket.onclose = (event) => {
          console.log('WebSocket connection closed. Code:', event.code, 'Reason:', event.reason);
        };
      });
    });
  });

[jennifer-shehane]

cy.intercept() doesn’t work with WebSockets, Cypress’s network layer only intercepts HTTP (xhr/fetch/document/etc.). WS Upgrade connections are piped straight through the proxy and never hit the interception middleware, so you can’t match, wait on, or stub them.

Your test opens a real socket, though, and the actual issue is that Cypress never waits for your async callbacks. You register onopen/onmessage and return immediately, so the test ends before a message arrives. Wrap the socket lifecycle in a promise Cypress can await:

cy.window().then((win) => {
  return new Cypress.Promise((resolve, reject) => {
    const ws = new win.WebSocket('wss://URL/v1')

    ws.onopen = () => ws.send(JSON.stringify({ /* ...authToken... */ }))
    ws.onmessage = (e) => {
      expect(JSON.parse(e.data).service).to.equal('zonegeomfile')
      ws.close()
      resolve()
    }
    ws.onerror = reject
  })
})

For deterministic tests without a live backend, stub the client instead, e.g. cy.stub(win, 'WebSocket'). The “handshake error” is a server/network-side rejection (auth or cross-origin on the upgrade), so reproduce it outside Cypress to isolate.