Cypress - cy.visit() failed trying to load

Question

Problem
I am running an integration test for Cypress which works fine locally but fails when I run it in Gitlab. The error I am receiving is while using the cy.visit() command that results in the following error:

CypressError: `cy.visit()` failed trying to load:
http://localhost:3000/ The response we received from your web server
was:
  404: Not Found

Configuration
I launch the test with the following commands:

tests:
  image: cypress/base:10
  stage: tests
  script:
    - npm ci
    - npm run test:ci

The commands look like this in my package.json:

      "scripts": {
        "start:ci": "serve dist --no-clipboard --listen ${PORT:-3000}",
        "test": "cross-env NODE_ENV=test && npm run test:jest && npm 
run test:cypress",
        "test:ci": "start-server-and-test start:ci http://localhost:3000 test",
        "test:cypress": "cypress run --headless",
        "test:jest": "jest",
      },

Research
I have looked into the error and found this thread which helped me understand the issue a little bit. I then tried adding the following config to my cypress.json file:

{
  "baseUrl": "http://localhost:3000"
}

but I still get the same error. Why would this be?

Answer 1

Add a slash to the end of the url or if you can remove the slash when placing the request.

Answer 2

In my case, it was a slow running test that triggered a timeout of cypress itself.

I could fix it by increasing the value of:

{
  "responseTimeout": 120e3
}

There's a documentation of all possible timeout. Yours may differ.

You may also want to only increase it for certain tests and not globally for all tests so that failed tests won't take that much more longer.

Answer 3

This can be two different problems:

1. Do you have sure your page is running healthy in http://localhost:3000? Maybe you can try to run a step first to make a request to this address and see if the status response is 200 and the content of this request

2. I will also suggest to you to run your test in GitLab in a different way also using wait-on, so first install wait-on dependence with npm i -D wait-on after that create a new script in your package.json and use this new script to run in Gitlab like:

   test:gitlab: "wait-on http://localhost:3000 && cypress run --config pageLoadTimeout=60000,retries=3,defaultCommandTimeout=4000 --browser chrome"