First Cypress test always fails no matter what in CircleCI - docker-compose

Question

I have a CircleCI config in which I am running machine executor, starting up my application using docker-compose, then running E2E tests in Cypress, that are not in docker, against this app. Cypress basically spins up a headless browser and tries to hit the specified url.
Now, no matter what my first test always fails. I have created 10 tests that just hit the root url and click a button. I have those tests run first. First one always fails.
The error is
CypressError: cy.visit() failed trying to load:
http://localhost:3000/
Which basically means there was no response or a 4-500
I though the app might not be ready yet, so I added a sleep before starting tests. I set that to 9 minutes (10 minutes times out on CircleCI). First test failed. I ratcheted that down to 2 minutes. First test fails.
Again to be clear, the first 10 tests are the same, so it’s not test specific.
Update
I have crossposted this to the CircleCI forum.

Answer 1

I think your server isn’t ready.
Before run cypress test, you have to wait for server.
If so, don't use sleep.
You can use wait-on or start-server-and-test.
You can check this doc. https://docs.cypress.io/guides/guides/continuous-integration.html#Boot-your-server

Answer 2

So TJ Jiang was close with his answer. Unfortunately wait-on doesn't work with CircleCI.
So I wrote my own,
timeout 540 bash -c 'while [ $(curl -s -o /dev/null -w %{http_code} localhost:3000) != "200" ]; do sleep 15; done' || false
This pings the url every 15 seconds for 9 minutes till it receives a http status code of 200 or it exits.
To be specific I wrote a Makefile target that uses that line above, I don't know how just pasting that in config.yml would work.
So running this as a step prior to running the cypress tests does in fact make it so all 5 identical tests pass.
So now it pings for about 3 1/2 minutes then goes through. I had tested with sleep up to 9 minutes and always the same result. So I don't know why this works better than sleep but it clearly does.

Answer 3

I had the same issue. Solved it by server/route/wait. I first start the server, then create a rout alias, wait for it to call the Api endpoint (which triggers the app to fill the dom) then do the rest (cy.get/click).
Example before:
cy.get('myCssSelector')
After server/route/wait:
cy.server()
cy.route('GET', '*/project/*').as('getProject')
cy.wait('#getProject')
.then(resp => {
expect(resp.status).to.eq(201)
})
cy.get('myCssSelector')