Websocket server not connecting

[hassannaseem]

Current behavior

Hello,

I have two application

• Javascript Application
• Xaml C# Websocket server backend Application

I have configured the cypress with my Javascript application via npm and tried to open my web server page with a simple test. I run my Javascript application on a NodeJs server.

The page loads fine but after the page loads, my Javascript application tries to connect to the Websocket server which fails in the cypress environment.

Web server runs on URL e.g. 127.0.0.1:8080
Websocket server runs on URL e.g. 127.0.0.1:80

In Electron I see a failed handshake message in the console:-

In chrome, it simply says failed:-

Desired behavior

After my page has loaded in the cypress test environment it should connect to the WebSocket server.

Taken in a normal chrome mode and it works fine outside the cypress environment

Test code to reproduce

I have a C# backend application that uses the SuperSocket WebSocket library v1.6.6.1 to host a WebSocket server on a specific port.

On the other hand, I have a NodeJs web server that serves the static JS/CSS/Images files and after the page loads, the website should connect with the c# websocket server in the cypress environment.

Cypress Version

10.2.0

Other

Everything works fine when I am not in the cypress testing environment.
I was reading the cypress documents and it says cypress may have trouble with different ports but I am not sure about it and need a solution. Please help me to run my application in the cypress environment

[lmiller1990]

Hi! I've got some basic apps working fine w/ web sockets (using Node). Are you able to create a minimal repo with your setup? I am not familar enough w/ C# to re-create it, but I don't know of any generic reason web sockets wouldn't be working w/ Cypress.

[hassannaseem]

Hi! I've got some basic apps working fine w/ web sockets (using Node). Are you able to create a minimal repo with your setup? I am not familar enough w/ C# to re-create it, but I don't know of any generic reason web sockets wouldn't be working w/ Cypress.

Okay, I have set up a small code so that you can test it on your machine. You can access the code from the following link.

https://drive.google.com/drive/folders/18mnc-4WwJqsS9PA3SF__IPQOjdEvBfem?usp=sharing

1. wpf_websocket_test.zip is a wpf .Net 4.8 framework project which uses the super sockets. Just compile and run the project in Visual Studio.
2. websocket_client.zip is a client-side JS code. You can directly run the index.html file or start from a web server. It will show a socket open message.

If you run the client project inside the cypress environment the connection fails.

Please let me know if you need help to setup this.

[lmiller1990]

I'll need to get a windows setup, please wait a bit. This repro is very useful - it means either myself or someone else can grab it and take a look. Thanks!

[marktnoonan]

Just updating with a note that I was able to reproduce this problem with the code provided, here is the page happy in Chrome, and angry in Cypress on Windows:

Not sure I have a way forward yet, going to poke around a bit.

[marktnoonan]

We found the error is present in the Cypress browser even with the Cypress extension disabled and in a new tab outside the iframe. This may point to something we set when opening Chrome (and Firefox, which has this issue as well).

@hassannaseem the way we launch browsers is documented here: https://docs.cypress.io/guides/guides/launching-browsers#Disabled-Barriers

And the specific flags we set are here: https://github.com/cypress-io/cypress/blob/develop/packages/server/lib/browsers/chrome.ts#L50

I would be curious if anything sticks out to you about these that might explain the handshake problem. It's possible something can be adjusted from your server side to work in this context, or that Cypress could be made to optionally unset a certain flag if it can be pinned down as the problem.

That said, generally speaking websockets are fine in Cypress and we don't see this 400 error in pages that communicate with them.

[albertocorrales]

I'm having the same issue when I run my e2e tests with cypress and I'm using WebSockets. Are there any workarounds to make it work?

In my case, I'm working with AWS API Gateway WebSockets

[lmiller1990]

@albertocorrales do you get the same error as shown above (400 could not connect)?

[albertocorrales]

@albertocorrales do you get the same error as shown above (400 could not connect)?

In my case I'm seeing the error
Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received
In the protocol header I'm sending the access token, and it works fine when I use chrome without cypress.

I suspect it is related to this issue: #7664

Edit:

Yep, I confirm it must be related to the issue in #7664, as I managed to workaround the issue with the by adding my websocket domain in the parameter --proxy-bypass-list

[lmiller1990]

Hm is it a bug or is --proxy-bypass-list the correct fix here 🤔

[albertocorrales]

Hm is it a bug or is --proxy-bypass-list the correct fix here 🤔

From my point of view, the --proxy-bypass-list option is a workaround. Ideally, cypress should wait for the WebSocket connection handshake and work fine, as it works in normal chrome or other browsers.

[cwbusacker]

I'm on the latest version of cypress 13.9.0 and it is still happening. Are there any updates?
I can't seem to get the --proxy-bypass-list to work. I've tried: --proxy-bypass-list=<-loopback>;ws://*/api/*, --proxy-bypass-list=<-loopback>,ws://*/api/*, --proxy-bypass-list=<-loopback>;ws://*, and --proxy-bypass-list=<-loopback>,ws://*