angularcypresse2e-testing

Cypress cannot access Angular server, even though it is started on localhost

I have an Angular application, that I start locally via ng serve --proxy-config proxy.config.json and a Cypress set-up that has a baseUrl of http://localhost:4200. After starting the server I can access it via localhost:4200, but not 127.0.0.1:42000 or 0.0.0.0:4200.

The problem is that when I try to start an e2e test in Cypress (no matter which browser selected) I get a CypressError:

`cy.visit()` failed trying to load:

http://localhost:4200/

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

  > Error: connect ECONNREFUSED 127.0.0.1:4200

Common situations why this would fail:
  - you don't have internet access
  - you forgot to run / boot your web server
  - your web server isn't accessible
  - you have weird network configuration settings on your computer

Server is indeed running

Why can Cypress not access the application? What can I do, so it can access it?

Related to cypress#26154

(Posted as Q&A)

Solution

  • (From Q&A)

    While this is a weird error, I found a few workarounds, that I will try to explain.

    Running Cypress as Adminstrator

    While this hasn't worked for me, it seemed to have been a good solution for others. Just start a cmd as Adminstrator and start cypress via npx cypress open (using npx is recommended). On my computer cypress crashes on start-up, when ran as Administrator, but there are other workarounds (See here).

    Using the host parameter

    ng serve allows one to set the host by using npx ng serve --host <h>. There is some very weird behavior going on, so I've compiled all outcomes in a table. This seems to vary from machine to machine depending on version and install path.

    Specs: Microsoft Windows 11 Enterprise Version 10.0.26100 Build 26100

    Cypress baseUrl Angular --host Works?
    localhost:4200 127.0.0.1 ✅
    localhost:4200 0.0.0.0 ✅
    localhost:4200 localhost ✅
    127.0.0.1:4200 127.0.0.1 ✅
    127.0.0.1:4200 0.0.0.0 ✅
    127.0.0.1:4200 localhost ❌
    0.0.0.0:4200 127.0.0.1 ❌
    0.0.0.0:4200 0.0.0.0 ❌
    0.0.0.0:4200 localhost ❌

    Using angular host 0.0.0.0 and Cypress baseUrl localhost:42000 seems to be the most consistent, but also did not work for everyone in our team. Use the table above for reference and try what works out for you.

    I hope this helps anyone else, that has to power through weird Cypress behavior...