如何使用 Nuxt + Cypress + CircleCI？

Question

我想做什么？

我想为我的 Nuxt 项目在 CircleCI 上运行 Cypress 测试

我有什么问题？

在本地模式下它工作正常，但我无法让它在 CircleCI 中工作

我已经尝试过 CircleCI orb cypress-io / cypress @ 1.28.0，但只是使用 wait-on 测试在 npm run dev 完成之前开始。

 - cypress / running:
      requires:
        - ramp up
      start: npm start
      wait: 'http: // localhost: 8181'
      cache-key:> -
        v1-dependencies - {{checksum "package.json"}}
      filters:
        Marking:
          only: /.*/
        branches:
          only: /.*/

CircleCI 也没有启动应用程序，我不知道为什么:(

我认为发生了什么？

我尝试了这个命令 bash curl -o /dev /null -u localhost:8181 /login -Isw '%{http_code}\n'localhost:8181 /login，即使 Nuxt 正在编译它们也会返回代码 200，所以我认为 Nuxt 成为可用的路由，即使它没有被编译。

帮助

有谁知道任何配置了 Cypress 和 CircleCI 的 Nuxt 项目供我查看？

这个打印意味着访问成功执行并且断言失败？

import { Response } from 'miragejs'

context('Login', () => {
  it('should login after button click', () => {
    cy.login({
      username: 'titular@ampa.ro',
      password: 'password',
    })

    cy.url()
      .should('eq', 'http://localhost:8181/')
  })

  it('should return invalid credentials', () => {
    cy.mirage((server) => {
      server.post('session', () => new Response(400, {}, {
        errorCode: 'credential_invalid',
        type: 'badRequestError',
        errorMessage: 'Credential invalid',
        errors: {},
      }))
    })

    cy.login({
      username: 'titular@ampa.ro',
      password: 'password',
    })

    cy.get('body').should('include.text', 'Credenciais inválidas')
  })
})

Answer 1

我可以解决我的问题

在 config.yml 上运行 e2e 测试是我的 CircleCI 工作：

test-e2e:
docker:
  - image: cypress/base:10
parallelism: 2
steps:
  - checkout
  - restore_cache:
      keys:
        - cache-{{ checksum "package.json" }}
  - run:
      name: Install dependencies
      command: npm ci
  - run: npm run cypress:verify
  - save_cache:
      key: cache-{{ checksum "package.json" }}
      paths:
        - ~/.npm
        - ~/.cache
  - run:
      name: Run Nuxt App
      command: npm run dev
      background: true
  - run:
      name: Run E2E
      command: npm run cypress:run

那是我在package.json 上与 e2e 测试相关的包脚本：

"dev": "nuxt",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"cypress:verify": "cypress verify",
"test:e2e": "start-server-and-test dev 8181 cypress:open"

最后，这就是我的cypress.json 更改以使其工作：

"defaultCommandTimeout":  60000,

现在，我的 e2e 测试运行良好！

Answer 2

我在赛普拉斯的开发者体验团队工作。

我们最近发布了CircleCI 指南，其中详细介绍了Cypress Real World App 存储库中部署的解决方案。