使用Playwright+TypeScript如何在运行时修改环境变量？

当然可以实现，核心是操作Node.js的process.env对象，同时根据变量的使用场景（仅测试代码/浏览器上下文）做对应处理，具体方案如下：

1. 仅在Node.js测试代码中生效 #

.env文件加载后，其内容会被解析到Node.js的全局process.env对象中，直接修改这个对象即可覆盖原有值：

// 生成运行时动态邮箱
const runtimeEmail = `test-${Date.now()}@example.com`;
// 覆盖环境变量
process.env.EMAIL = runtimeEmail;

// 后续测试逻辑中读取process.env.EMAIL就是新值
console.log(process.env.EMAIL); // 输出: test-1718xxxxxx@example.com

注意：这种修改只存在于内存中，不会改动本地的.env文件，测试结束后自动恢复。

2. 需要在Playwright浏览器上下文中生效 #

浏览器环境和Node.js测试环境是隔离的，若网页需要使用修改后的EMAIL变量，需要将变量注入到浏览器上下文：

方案A：通过初始化脚本注入到全局对象 #

如果网页依赖全局变量（比如window.EMAIL），用page.addInitScript注入：

test('动态修改邮箱并注入浏览器', async ({ page }) => {
  const runtimeEmail = `test-${Date.now()}@example.com`;
  // 修改Node端环境变量
  process.env.EMAIL = runtimeEmail;

  // 将新邮箱注入浏览器的window对象
  await page.addInitScript((email) => {
    window.EMAIL = email;
    // 若网页通过其他方式读取环境变量（比如打包时注入的process.env），需对应调整全局变量名
  }, runtimeEmail);

  // 后续操作页面，网页即可读取到新的EMAIL值
  await page.goto('/');
});

方案B：通过HTTP头传递给后端 #

如果后端需要读取这个邮箱变量，可通过自定义HTTP头传递：

test('动态修改邮箱并通过请求头传递', async ({ browser }) => {
  const runtimeEmail = `test-${Date.now()}@example.com`;
  process.env.EMAIL = runtimeEmail;

  // 创建带自定义头的浏览器上下文
  const context = await browser.newContext({
    extraHTTPHeaders: {
      'X-User-Email': runtimeEmail,
      // 对应后端读取的头字段，按需命名
    },
  });

  const page = await context.newPage();
  await page.goto('/');
  // 后端可通过请求头获取到动态生成的邮箱
});

3. 测试用例间的环境变量隔离 #

如果多个测试用例需要独立的环境变量，可在测试前后重置值，避免污染：

let originalEmail: string;

// 每个测试前保存原始值
test.beforeEach(() => {
  originalEmail = process.env.EMAIL || '';
});

// 每个测试后恢复原始值
test.afterEach(() => {
  process.env.EMAIL = originalEmail;
});

test('测试用例1', async ({ page }) => {
  process.env.EMAIL = 'case1-test@example.com';
  // ...测试逻辑
});

test('测试用例2', async ({ page }) => {
  // 这里的EMAIL会恢复为.env中的原始值
  console.log(process.env.EMAIL); // 输出: someemail@email.com
});

内容的提问来源于stack exchange，提问作者David Pongo