Cypress ReactJs tests Fail to find elements on Gitlab CI

Question

I am testing some Reactjs UI with Cypress. When I run the tests locally using localhost:3000, the tests pass but when I push to Gitlab CI, the tests fail and the error is as shown below.

CypressError: Timed out retrying: Expected to find element: '.css-iyxtew', but never found it.

This is not due to server delay, I have tried adding wait time in vain. My guess is that the localhost server on Gitlab is not okay. Please help me with any solutions.

beforeEach(() => {
    cy.visit('localhost:3000')
    eslint-disable-next-line no-return-assign
    cy.window().then(win => win.onbeforeunload = undefined)
  })

  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })

  it('.should() - make an assertion about the current page', () => {
    cy.get('[data-cy=loader]').find('h6').should('be.visible')
    cy.get('body').should('be.visible')
    cy.get('.css-iyxtew').should('be.visible')
    cy.get('[data-cy=index-page]').find('[data-cy=heading]').should('be.visible')

     cy.get('.css-iyxtew').find('li').should('have.length', 2)
       .find('.login').find('.css-17nm302-Button')
       .should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')

    cy.get('.main-section').should('exist').find('.left-nav ').should('exist')
      .find('.left-margin-pane').should('exist')
     cy.get('.heading').find('.sub-heading')
       .contains('Choose a phase below to browse our growing collection of adaptive implementation resources')
  })

Answer 1

The solution I found out after some time is that I needed to add env variables to the CI environment too for the server to run.

this is gitlab-ci.yml

variables:
  GET_PHASE_KITS: $GET_PHASE_KITS
  GET_KIT: $GET_KIT
  GET_PHASE_ASSETS: $GET_PHASE_ASSETS
  GET_USER: $GET_USER
  CREATE_USER: $CREATE_USER
  ADD_USER_KIT: $ADD_USER_KIT
  GET_USER_BY_ID: $GET_USER_BY_ID
  GET_PHASES: $GET_PHASES
  ADD_USER_ASSET: $ADD_USER_ASSET
  GET_ASSET: $GET_ASSET
  GET_PHASE: $GET_PHASE
  EDIT_USER: $EDIT_USER