如何配置Nuxt项目在CircleCI上正常运行Cypress测试？

Nuxt dev模式下，编译过程中服务会提前启动并返回状态码200的编译过渡页，wait-on默认仅校验HTTP状态码，因此会误判服务已就绪，导致测试提前执行。

1. 优先推荐：CI中使用生产构建包运行测试 #

生产构建模式会提前完成编译，启动服务后直接返回正常页面，从根源避免过渡页误判问题，修改CircleCI配置如下：

- cypress/run:
    requires:
      - ramp up
    # 提前执行生产构建，编译逻辑在服务启动前完成
    build: npm run build
    start: npm start
    wait-on: 'http://localhost:8181'
    # 延长等待超时时间，避免构建慢导致超时
    wait-on-timeout: 180
    cache-key: >-
      v1-dependencies-{{checksum "package.json"}}
    filters:
      tags:
        only: /.*/
      branches:
        only: /.*/

注意修正原配置的2个格式错误：

• orb命令应为cypress/run，原配置多了空格和拼写错误
• wait地址不要加多余空格，格式为http://localhost:8181

2. 若必须使用dev模式运行测试 #

替换默认的wait-on逻辑，增加页面内容校验，确保等待到真实业务页面返回再启动测试：

- run:
    name: 等待Nuxt服务完全就绪
    command: |
      # 先等待端口可访问
      wait-on --httpTimeout 180000 http://localhost:8181/login
      # 循环校验页面是否包含真实业务内容（比如登录页的"登录"文本），避免匹配到编译过渡页
      until curl -s http://localhost:8181/login | grep -q "登录"; do
        sleep 2
      done
- cypress/run:
    requires:
      - ramp up
      - 等待Nuxt服务完全就绪
    # 去掉原配置里的wait参数，已手动完成等待
    start: npm run dev
    cache-key: >-
      v1-dependencies-{{checksum "package.json"}}
    filters:
      tags:
        only: /.*/
      branches:
        only: /.*/

针对你的Cypress测试代码，增加断言的稳定性：

it('should login after button click', () => {
  cy.login({
    username: 'titular@ampa.ro',
    password: 'password',
  })
  // 先等待首页特定元素加载完成，再校验url，避免跳转延迟导致断言失败
  cy.get('[data-testid="home-page"]').should('be.visible')
  cy.url().should('eq', 'http://localhost:8181/')
})

如果Cypress报错截图显示的是Nuxt编译进度页，就是服务未就绪导致的提前执行问题；如果截图显示的是正常的登录页面，就是测试断言等待时间不足导致的问题，按照上面的测试优化方案调整即可。

内容的提问来源于stack exchange，提问作者hoffman