angular - 当我有不同的 baseUrl 和 apiUrl 时，为不同的环境设置 cypress

Question

所以我一直在本地主机上设置测试，但现在我想将它们设置为在几个不同的环境上运行，但在所有环境上我都有一个单独的baseUrl和apiUrl。dev 有:http://base.url.com 和 api:http://base.url.com/apiprod 具有:https://prod.url.com 和 api:https://prod-api.url.com/v1

我已经阅读了这里的文档和一些帖子(尽管其中很多来自 cypress v10 之前的内容)，但我无法决定什么是最好的方法。我倾向于创建不同的配置文件(cypress-dev.config.ts、cypress-prod.config.ts 等)，每个文件针对不同的环境，如下所示:

e2e: { 
  baseUrl: 'http://base.url.com', 
  env: { 
    apiURl: '..'  
}}

创建新的 npm 脚本，我将 cypress 设置为在特定环境中运行时使用正确的配置文件。

我考虑过使用一个配置文件，但我无法弄清楚到底如何做。

e2e: {    env: { 
    development: { 
      baseUrl:'baseURlDev',
      apiURl: 'apiUrlDev'
    },
    production: {
      baseUrl:'baseURlProd',
      apiURl: 'apiUrlProd'
    },
    staging: {
      baseUrl:'baseURlStag'
      apiURl: 'apiUrlStag'   } 
    }}

以及如何使用它是我的 Cypress 代码。 Cypress.env('环境类型.baseUrl')??这个我不太清楚。

或者也许还有我还没有考虑过的第三种巧妙的方法？

Answer 1

当 Cypress v10 将配置从 cypress.json 更改为 cypress.config.js 时，好处之一是允许在配置中使用 javascript。

这意味着不再需要以前需要外部包的繁琐的东西(例如 dotenv 这类东西)。

这就是我实现您的环境类型的方式

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      const envName = config.env['type-of-environment'] || 'development'
      const envType = config.env[envName] 
      config.baseUrl = envType.baseUrl;
      config.env.apiUrl = envType.apiUrl;
      return config
    },
    env: { 
      development: { 
        baseUrl:'http://baseURlDev',
        apiUrl: 'http://apiUrlDev'
      },
      production: {
        baseUrl:'http://baseURlProd',
        apiUrl: 'http://apiUrlProd'
      },
      staging: {
        baseUrl:'http://baseURlStag',
        apiUrl: 'http://apiUrlStag'   
      },
    }
  },
})

package.json

{
  ...
  "scripts": {
    "cy:open": "cypress open",         // defaults to development
    "cy:prod": "cypress open --env type-of-environment=prod"
  }
}