如何在 Cypress 運行的瀏覽器中使用 process.env 變量

Question

在我的應用程序的源代碼中（基於 create-react-app 的 React），我正在使用這樣的環境變量： process.env.REACT_APP_API_URL存儲在我的.env.*文件中。

但是當我在 Cypress 下運行相同的應用程序時， process.env對象是空的。 當 React 應用程序在 Cypress 下運行時，我如何提供這些變量以供其使用？

我知道我可以設置賽普拉斯環境變量，但這不是我想要的——這是一個不同的范圍。

Answer 1

您可以使用配置 API並在您的插件文件上執行類似的操作。 設置config.env = process.env這將為Cypress設置整個節點環境。

// cypress/plugins/index.js
module.exports = (on, config) => {

  // modify env value
  config.env = process.env

  // return config
  return config
}

您還可以使用config.env.YOUR_VAR = process.env.YOUR_VAR有選擇地分配所需的值。

Answer 2

創建包含環境變量的cypress.env.json文件：

{
  "api_url": "http://localhost:8080"
}

然后在你的cypress/support/index.js中設置process.env ：

...

before(() => {
  process.env. REACT_APP_API_URL = Cypress.env("api_url");
})

Answer 3

在賽普拉斯 10.3.0 及更高版本中更新

對於 OP 問題，為了在Cypress中使用process.env變量，您需要使用dotenv包。

npm install dotenv

確保這行代碼位於cypress.config.js之上

require('dotenv').config()

現在您可以使用 process.env，但只能在cypress.config.js文件下。 如另一個答案中所述，您應該通過將所有process.env屬性傳遞給賽普拉斯環境變量來利用Cypress.env()命令，以便您可以在賽普拉斯中全局訪問這些變量

// cypress.config.js
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      config.env = process.env
      return config
    }
  }
})

請注意，在賽普拉斯10.0.0及更高版本中，添加了setupNodeEvents以替換已棄用的插件文件。

現在您可以通過以下方式檢索這些變量：

Cypress.env("your_proccess_env_property")

Answer 4

對於我的用例，我只能執行以下操作。

// cypress.config.js
require('dotenv').config();
const { defineConfig } = require('cypress');

module.exports = defineConfig({
    ...,
    env: {
        ...process.env,
    },
});

希望這對將來的其他人有幫助！

Answer 5

如果你想使用相同的變量，使用與 React 應用程序相同的方式，同時只運行沒有應用程序的 Cypress（這就是 process.env 為空的原因）。 您可以在cypress.config.js中添加它

const dotenvOutput = require('dotenv').config()

然后訪問變量為

module.exports = defineConfig({
e2e: {
    env: {
       api_url: dotenvOutput.parsed.REACT_APP_API_URL,
    },

您還需要確保.env文件在運行 cypress 的地方可用。