cypress: Cypress cannot access different ports on localhost

Current behavior

A similar issue has been closed previously (https://github.com/cypress-io/cypress/issues/6475) without a working solution in place.

I am trying to implement e2e tests for a web application with an AngularJS frontend and a Django backend with Cypress. Both run locally (frontend: localhost:4200, backend: localhost:8000), but either one or the other are not accessible in the Cypress environment, despite working perfectly fine in a regular browser window. This is happening regardless of which (Cypress) browser I am using. In each case, the domain I access first manages to load with the other being blocked: image image

Desired behavior

Cypress should be able to reach both ports on localhost

Test code to reproduce

The code for both backend and frontend are available at https://github.com/ChriReiter/JAM The running config uses an external database server, which is no longer in use. To redirect requests to the localhost, change the file at frontend/src/environments/environments.ts to target the localhost as the apiBaseUrl

Cypress Version

12.8.1

Node version

18.12.0

Operating System

Windows 11, Version 22H2

Debug Logs

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
cypress/e2e/spec.cy.ts:5:6
  3 | })
  4 | it('passes', () => {
> 5 |   cy.visit('http://localhost:4200/')
    |      ^
  6 | })
  7 |  
View stack trace
 Print to console
    at <unknown> (http://localhost:8000/__cypress/runner/cypress_runner.js:138252:82)
    at visitFailedByErr (http://localhost:8000/__cypress/runner/cypress_runner.js:137644:12)
    at <unknown> (http://localhost:8000/__cypress/runner/cypress_runner.js:138251:11)
From previous event:
    at visit (http://localhost:8000/__cypress/runner/cypress_runner.js:138217:17)
    at Context.visit (http://localhost:8000/__cypress/runner/cypress_runner.js:138268:14)
    at wrapped (http://localhost:8000/__cypress/runner/cypress_runner.js:151174:43)
From Your Spec Code:
    at Context.eval (webpack:///./cypress/e2e/spec.cy.ts:5:5)
From Node.js Internals:
  Error: connect ECONNREFUSED 127.0.0.1:4200
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

Other

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 16 (6 by maintainers)

Commits related to this issue

Most upvoted comments

Hello, I had the same issue in one of the two projects I work on with Django and Angular. Turns out I was using --host 0.0.0.0 on the one that was working ok.

I run the angular server like this and the problem was solved

ng serve --host 0.0.0.0

The problems mostly arise if the dev server is not listening on both IPv4 and IPv6 stacks and after migrating to Node.js >= 18 where the order of IP addresses returned from Node.js requesting the address of localhost was changed.

@lmiller1990 sorry for the inconvenience once again.

The current branch I am running is the latest version of the main branch.

The code I tested was with the “basic installation” of Cypress (getting started in the cypress documentation): running npm install in the frontend folder, following the terminal instructions (e.g. changing the default testing route “ng e2e” to access Cypress) and running the code.

The spec.cy.ts is as kept as simple as possible for testing. The file itself contains no other statements than these: describe(‘Login’, () => { it(‘Load frontend’, () => { cy.visit(‘http://localhost:4200/’) }) it(‘Load backend’, () => { cy.visit(‘http://localhost:8000/api/’) }) })

The issue prevails if ‘Load frontend’ and ‘Load backend’ are swapped (as seen in the screenshots).

Thank you @szykov for the workaround, this solution works perfectly fine for me as well!

I also confirm that. If you use different ports for localhost it accepts only one. We use angular to run different micro frontends and use localhost to test it. It works just fine in any browser but in cypress. So for example https://localhost:46000/any_file.js (WORKS) https://localhost:47000/any_file.js (NOT WORKING, ERR_EMPTY_RESPONSE) It gives an empty response. I tried different versions of cypress or chromium browsers and had no luck. Clearing cache, deleting HSTS for localhost, setting false for chromeWebSecurity, disabling firewalls and antiviruses, experimenting with different ports, and using different laptops. nothing works.

the workaround is to set the domain name in the OS hosts file. an example for windows: ::1 localhost.local https://localhost:46000/any_file.js (WORKS) https://localhost.local:47000/any_file.js (WORKS) if you use webpack to serve files then do not forget to disable-host-check