如何在 Cypress 运行的浏览器中使用 process.env 变量

Question

在我的应用程序的源代码中（基于 create-react-app 的 React），我使用这样的环境变量：

process.env.REACT_APP_API_URL

，它们存储在我的

.env.*

文件中。

但是当我在 Cypress 下运行相同的应用程序时，

process.env

对象是空的。当 React 应用程序在 Cypress 下运行时，如何提供这些变量以供在 React 应用程序中使用？

我知道我可以设置 Cypress 环境变量，但这不是我想要的 - 这是一个不同的范围。

Answer 1

在 Cypress 10.3.0 及以上版本中更新

在 Cypress 中，环境变量（可通过

Cypress.env

访问）与操作系统级环境变量不共享相同的范围。为了使

process.env

变量在

Cypress

中可用，您应该使用第三方库，例如非常流行的 dotenv 包。

npm install dotenv

确保这行代码位于您的

cypress.config.js

之上

require('dotenv').config()

现在您可以使用 process.env 了，但只能在该

cypress.config.js

文件下使用。正如另一个答案中提到的，您应该利用 Cypress.env() 命令，将所有

process.env

属性传递给 Cypress 环境变量，以便您可以在 Cypress 中全局访问这些变量

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

请注意，在 Cypress 版本

10.0.0

及更高版本中，添加了 setupNodeEvents 来替换已弃用的插件文件。

现在您可以通过以下方式检索这些变量：

Cypress.env("your_proccess_env_property")

Answer 2

您可以使用 configuration 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 3

对于我的用例，我只需执行以下操作即可。

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

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

希望这对将来的其他人有帮助！

Answer 4

创建包含环境变量的

cypress.env.json

文件：

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

然后在您的

process.env

中设置

cypress/support/index.js

:

...

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

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 的地方可用。

Answer 6

新的、更好的答案（2023）

Cypress 配置选项如果遵循

CYPRESS_

命名约定（根据 docs），将被操作系统级环境变量覆盖。 这也适用于在命令行或“在您的 CI 提供程序中”设置的环境变量。

例如，

e2e: {
    baseUrl: 'localhost',
}

将被名为

CYPRESS_BASE_URL

的操作系统环境变量覆盖。

就是这样。

Answer 7

如果您使用

dotenv

（这会强制您将

.env

文件保留在根目录下），请执行以下操作 -

1. 将环境变量放入

   .env

   -

FOO=BAR

2. 在

   cypress.config.js

   添加以下内容 -

const { defineConfig } = require("cypress");
require("dotenv").config();

module.exports = defineConfig({
  env: {
    // add environment variables here
    FOO: process.env.FOO,
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

3. 在您的规范文件中（例如。

   cypress/e2e/foo.cy.js

   ）-

describe("sample spec", () => {
  it("checks if env var FOO is BAR", () => {
    const FOO = Cypress.env("FOO");
    expect(FOO).to.equal("BAR");
  });
});