Cypress ReactJs 测试无法在 Gitlab CI 上找到元素答案

【问题标题】：Cypress ReactJs tests Fail to find elements on Gitlab CICypress ReactJs 测试无法在 Gitlab CI 上找到元素
【发布时间】：2019-08-30 01:32:13
【问题描述】：

我正在使用 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')
  })

【问题讨论】：

你确定每次生成的类名都是css-iyxtew不是别的吗？

标签： reactjs integration-testing gitlab-ci next.js cypress

【解决方案1】：

一段时间后我发现的解决方案是，我也需要将 env 变量添加到 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

【讨论】：