Cypress ReactJs 测试在 Gitlab 上找不到元素 CI

Question

我正在用 Cypress 测试一些 Reactjs UI。当我运行使用 localhost:3000 在本地进行测试时，测试通过但是当我推送到 Gitlab CI 时，测试失败并且错误如下所示。

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

这不是服务器延迟，我试过增加等待时间，但没有成功。我的猜测是Gitlab上的localhost服务器不行。请帮我解决任何问题。

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

一段时间后我发现的解决方案是我也需要将环境变量添加到 CI 环境中，以便服务器运行。

这是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

Cypress ReactJs 测试在 Gitlab 上找不到元素 CI

Cypress ReactJs tests Fail to find elements on Gitlab CI

integration-testing

reactjs

gitlab-ci

next.js

cypress