在 Playwright 中启动 webServer 时如何使用不同的 .env 文件？

Question

我正在将 Playwright 引入我的项目。 我当前的项目结构在单个存储库中有一个单独的后端和前端，Playwright 安装在项目的前端部分。

├ .git
├ frontend/                  
│    ├ ...          
│    ├ playwright.config.ts           
│    ├ .env                  
│    └ package.json 
└ backend/          
     ├ ...          
     ├ server.js    
     ├ .env         
     └ package.json  

当我从/frontend中运行npx playwright test时，我希望我的前端和后端服务都启动。

// playwright.config.ts
webServer: [
  {
    // start frontend
    command: "npm run start",
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
  {
    // start backend
    command: "cd ../backend && node server",
    port: 3001,
    reuseExistingServer: !process.env.CI,
  },
]

但是，/ /frontend/.env中指定的环境变量是传递给后端的环境变量，因此后端在尝试启动时配置不完整或错误。 我尝试使用env属性并在dotenv.config()中指定后端.env文件的路径，但随后它覆盖了前端环境变量，给了我相同但相反的问题。

如何让后端进程使用/backend/.env ，前端进程使用/frontend/.env ？

Answer 1

您可以强制dotenv读取每个.env文件，然后缓存process.env的值。 然后我可以将环境变量传递给每个具有env属性的网络服务器。 因为我想/frontend/.env加载到process.env中，所以我先加载/backend/.env 。

override: true如果您有冲突的环境变量，例如PORT ，则第二次调用dotenv.config()是必需的。 默认情况下， dotenv不会设置已经存在的环境变量，因此不会设置任何同名变量。

import type { PlaywrightTestConfig } from "@playwright/test";
import dotenv from "dotenv";

dotenv.config({ path: "../backend/.env", override: true });
const backendEnv = { ...process.env } as { [key: string]: string };
dotenv.config({ override: true });
const frontendEnv = { ...process.env } as { [key: string]: string };

const config: PlaywrightTestConfig = {
  // omitted config above...
  webServer: [
    {
      command: "npm run start",
      port: 3000,
      reuseExistingServer: !process.env.CI,
      env: frontendEnv,
    },
    {
      command: "cd ../backend && node server",
      port: 3001,
      reuseExistingServer: !process.env.CI,
      env: backendEnv,
    },
  ],
}