cypress-io / cypress-realworld-testing-course-app

https://cypress-realworld-testing-course-app.vercel.app/
72 stars 225 forks source link

localhost server created with node js is not accessible in the cypress enviroment in a novice cypress course #27

Open Pet4rdo opened 1 year ago

Pet4rdo commented 1 year ago

First of all sorry about my english because I am not a native speaker. I am trying to learn Cypress automation from the beginning and I just trying to follow this initial course (https://learn.cypress.io/testing-your-first-application/app-install-and-overview). I install everything but when I run the server in my local machine with Windows 10 at "http://localhost:3000/" I am able to reach it and see it properly,but when I run a simple test with cypress, the "cypress browser" do not load,reach or see it at "http://localhost:3000/". It happens the same with the rest of the browsers. "Normal" browsers reach it, but not the ones that cypress launch. I tried also insted of localhost, using the name of my machine, 127.0.0.1 and do not work as well.

From the logs side, here it is what I found: at (http://localhost:54956/__cypress/runner/cypress_runner.js:147677:82) at visitFailedByErr (http://localhost:54956/__cypress/runner/cypress_runner.js:147069:12) at (http://localhost:54956/__cypress/runner/cypress_runner.js:147676:11) From previous event: at visit (http://localhost:54956/__cypress/runner/cypress_runner.js:147642:17) at Context.visit (http://localhost:54956/__cypress/runner/cypress_runner.js:147693:14) at wrapped (http://localhost:54956/__cypress/runner/cypress_runner.js:160602:43) From Your Spec Code: at Context.eval (webpack:///./cypress/e2e/home.cy.ts:3:7) From Node.js Internals: Error: ESOCKETTIMEDOUT at ClientRequest. (:1969:73407) at Object.onceWrapper (node:events:641:28) at ClientRequest.emit (node:events:527:28) at Socket.emitRequestTimeout (node:_http_client:771:9) at Object.onceWrapper (node:events:641:28) at Socket.emit (node:events:539:35) at Socket._onTimeout (node:net:516:8) at listOnTimeout (node:internal/timers:559:17) at process.processTimers (node:internal/timers:502:7)

From Screenshots point of view, attached is what I found. Error_localhost_3000

MikeMcC399 commented 1 year ago

@Pet4rdo

I can see from your screenshot that you are getting an ESOCKETTIMEOUT.

What operating system are you using? Is it Windows and have you perhaps installed Cypress on OneDrive?

You can get a more readable log if you execute:

npx cypress run

Also if you want to check the final solution you can switch to the final branch and run the same command there as well.

Pet4rdo commented 1 year ago

@Pet4rdo

I can see from your screenshot that you are getting an ESOCKETTIMEOUT.

What operating system are you using? Is it Windows and have you perhaps installed Cypress on OneDrive?

You can get a more readable log if you execute:

npx cypress run

Also if you want to check the final solution you can switch to the final branch and run the same command there as well.

Hi I am using windows 10,and now I try with the run appendix and the final branch and error still there.(see attached screenshot).The entire debug log is: DevTools listening on ws://127.0.0.1:53211/devt

===============================================

(Run Starting)

┌──────────────────────────────────────────── │ Cypress: 12.12.0 │ Browser: Electron 106 (headless) │ Node Version: v16.16.0 (C:\Program Files\ │ Specs: 3 found (home.cy.ts, subscr │ Searched: cypress/e2e/*/.cy.{js,jsx └────────────────────────────────────────────

───────────────────────────────────────────────

Running: home.cy.ts

Home page Hero section 1) "before each" hook for "the h1 contain

0 passing (31s) 1 failing

1) Home page Hero section "before each" hook for "the h1 contain CypressError: cy.visit() failed trying t

http://localhost:3000/

We attempted to make an http request to this UR

We received this error at the network level:

Error: ESOCKETTIMEDOUT

Common situations why this would fail:

Because this error occurred during a `before ea at (http://localhost:53214/__cy at visitFailedByErr (http://localhost:532 at (http://localhost:53214/__cy at tryCatcher (http://localhost:53214/__c at Promise._settlePromiseFromHandler (htt at Promise._settlePromise (http://localho at Promise._settlePromise0 (http://localh at Promise._settlePromises (http://localh at _drainQueueStep (http://localhost:5321 at _drainQueue (http://localhost:53214/__ at ../../node_modules/bluebird/js/release at Async.drainQueues (http://localhost:53 From Your Spec Code: at Context.eval (webpack:///./cypress/e2e

From Node.js Internals: Error: ESOCKETTIMEDOUT at ClientRequest. (<embedded at Object.onceWrapper (node:events:641: at ClientRequest.emit (node:events:527: at Socket.emitRequestTimeout (node:_htt at Object.onceWrapper (node:events:641: at Socket.emit (node:events:539:35) at Socket._onTimeout (node:net:516:8) at listOnTimeout (node:internal/timers: at process.processTimers (node:internal

(Results)

┌──────────────────────────────────────────── │ Tests: 5 │ Passing: 0 │ Failing: 1 │ Pending: 0 │ Skipped: 4 │ Screenshots: 1 │ Video: true │ Duration: 30 seconds │ Spec Ran: home.cy.ts └────────────────────────────────────────────

(Screenshots)

───────────────────────────────────────────────

Running: subscribe.cy.ts

Newsletter Subscribe Form 1) "before each" hook for "allows users to

0 passing (30s) 1 failing

1) Newsletter Subscribe Form "before each" hook for "allows users to CypressError: cy.visit() failed trying t

http://localhost:3000/

We attempted to make an http request to this UR

We received this error at the network level:

Error: ESOCKETTIMEDOUT

Common situations why this would fail:

Because this error occurred during a `before ea at (http://localhost:53214/__cy at visitFailedByErr (http://localhost:532 at (http://localhost:53214/__cy at tryCatcher (http://localhost:53214/__c at Promise._settlePromiseFromHandler (htt at Promise._settlePromise (http://localho at Promise._settlePromise0 (http://localh at Promise._settlePromises (http://localh at _drainQueueStep (http://localhost:5321 at _drainQueue (http://localhost:53214/__ at ../../node_modules/bluebird/js/release at Async.drainQueues (http://localhost:53 From Your Spec Code: at Context.eval (webpack:///./cypress/e2e

From Node.js Internals: Error: ESOCKETTIMEDOUT at ClientRequest. (<embedded at Object.onceWrapper (node:events:641: at ClientRequest.emit (node:events:527: at Socket.emitRequestTimeout (node:_htt at Object.onceWrapper (node:events:641: at Socket.emit (node:events:539:35) at Socket._onTimeout (node:net:516:8) at listOnTimeout (node:internal/timers: at process.processTimers (node:internal

(Results)

┌──────────────────────────────────────────── │ Tests: 3 │ Passing: 0 │ Failing: 1 │ Pending: 0

(Screenshots)

──────────────────────────────────────────────────────────────────────────────────────────

Running: user-journey.cy.ts (3 of 3)

User Journey 1) a user can find a course on the home paglete the courses lessons

0 passing (31s) 1 failing

1) User Journey a user can find a course on the home paglete the courses lessons: CypressError: cy.visit() failed trying t

http://localhost:3000/

We attempted to make an http request to this UR request failed without a response.

We received this error at the network level:

Error: ESOCKETTIMEDOUT

Common situations why this would fail:

====================================================================================================

(Run Finished)

   Spec                                              Tests  Passing  Failing  Pending  Skipped

┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ × home.cy.ts 00:30 5 - 1 - 4 │ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ × subscribe.cy.ts 00:30 3 - 1 - 2 │ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ × user-journey.cy.ts 00:30 1 - 1 - - │ └────────────────────────────────────────────────────────────────────────────────────────────────┘ × 3 of 3 failed (100%) 01:31 9 - 3 - 6 Final_branch

MikeMcC399 commented 1 year ago

The logs are not very readable. If you use a terminal window inside of VSCode and this window is not wide then the lines are truncated. It is better if you start a terminal window outside of VSCode to get a better view and make sure the window is wide.

You are still seeing the ESOCKETTIMEDOUT error.

You may be able to check the server connection independently with curl -I http://localhost:3000. An example output is:

$ curl -I http://localhost:3000
HTTP/1.1 200 OK
x-nextjs-cache: MISS
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
ETag: "16bt84uhe3oilp"
Content-Type: text/html; charset=utf-8
Content-Length: 24109
Vary: Accept-Encoding
Date: Fri, 19 May 2023 11:16:45 GMT
Connection: keep-alive
Keep-Alive: timeout=5

Possibly you have a network problem on your system. A firewall or other network / virus protection could be affecting your results.

I can see that you are using Node.js 16.16.0 which is not the current LTS version 18.16.0. That should not make any difference though.

Pet4rdo commented 1 year ago

The logs are not very readable. If you use a terminal window inside of VSCode and this window is not wide then the lines are truncated. It is better if you start a terminal window outside of VSCode to get a better view and make sure the window is wide.

You are still seeing the ESOCKETTIMEDOUT error.

You may be able to check the server connection independently with curl -I http://localhost:3000. An example output is:

$ curl -I http://localhost:3000
HTTP/1.1 200 OK
x-nextjs-cache: MISS
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
ETag: "16bt84uhe3oilp"
Content-Type: text/html; charset=utf-8
Content-Length: 24109
Vary: Accept-Encoding
Date: Fri, 19 May 2023 11:16:45 GMT
Connection: keep-alive
Keep-Alive: timeout=5

Possibly you have a network problem on your system. A firewall or other network / virus protection could be affecting your results.

I can see that you are using Node.js 16.16.0 which is not the current LTS version 18.16.0. That should not make any difference though. Hi @MikeMcC399 thanks for your lovely support. 1-My question is, ok,let´s assume that I have any kind of firewall/network security/other affecting my results. My question here will be, and why is affecting only the "cypress chrome" and not the "normal chrome"? 2- Related to this bug, I see that there is not anyone assigned to review it,right? How we can move on with the bug in order to get some more answers? 3-I tried your "curl" command in the cmd on windows. Notthing happen. Captura de pantalla 2023-05-22 123421 What am I doing wrong? I tried also in the VSC terminal and powershell and for both I get this: Captura de pantalla 2023-05-22 123958 What is expected for that "uri"?

MikeMcC399 commented 1 year ago

@Pet4rdo Are you using a VPN?

Pet4rdo commented 1 year ago

I tested in both scenarios, with and without VPN and the error remains for both.

MikeMcC399 commented 1 year ago

@Pet4rdo

I'm sorry I don't think I can help you any further with your ESOCKETTIMEDOUT problem. Normally I would expect the curl command to work in a Microsoft Windows cmd or Git Bash terminal window. You may be able to find some tips via Google search.

Unfortunately I cannot reproduce your issue on my Windows 11 system either, so I have nothing that I can look into deeper.

Pet4rdo commented 1 year ago

@Pet4rdo

I'm sorry I don't think I can help you any further with your ESOCKETTIMEDOUT problem. Normally I would expect the curl command to work in a Microsoft Windows cmd or Git Bash terminal window. You may be able to find some tips via Google search.

Unfortunately I cannot reproduce your issue on my Windows 11 system either, so I have nothing that I can look into deeper.

@MikeMcC399 Really thanks for the support as I said. Do you know how the gitub worklow works in terms of issue assignation? How we can make that somebody look into it?

MikeMcC399 commented 1 year ago

@Pet4rdo

Really thanks for the support as I said.

You're welcome!

Do you know how the gitub worklow works in terms of issue assignation? How we can make that somebody look into it?

This is managed by the Cypress team. I am also waiting for two of my issues in this repository to be looked at.

You can also join the Discord community chat if you are interested.

MikeMcC399 commented 1 year ago

@Pet4rdo

CognizantFSE commented 6 months ago

Just jumping in here, since I was dealing with this issue and found resolution thanks to this article: unable-to-load-locahost-in-cypress The issue is HOW you are serving your local site. Adding --host flag to the command that launches your local webserver fixed this issue for me.

DanielDaCosta commented 1 month ago

I want to share a solution that worked for me when using Cypress with localhost, in case anyone faces the same issue:

Solution that worked for me

Solution 1: Use Your IP Address

Instead of accessing cy.visit("http://localhost:3000"), swap localhost with your own IP address. To get your IP on a Mac, run the following command:

ifconfig | grep "inet " | grep -v 127.0.0.1 | cut -d\  -f2

Your Cypress test would look something like this:

cy.visit("http://192.168.86.37:3000")

Other Solutions I Tried but Did Not Work

Solution 2: Accept-Encoding Headers

I tried setting custom headers, but it didn't resolve the issue:

cy.visit("http://localhost:3000", { headers: { "Accept-Encoding": "gzip, deflate" } })

Solution 3: Timeout Configuration

Increasing the timeout didn't help either:

cy.visit("http://localhost:3000", { timeout: 30000 })

Solution 4: Response Timeout

Adjusting the response timeout also didn't work for me:

cy.visit("http://localhost:3000", { responseTimeout: 120000 })

Hopefully, this helps someone else facing similar issues!