如何利用Vite内置机制向Playwright传递环境变量

1. 利用Vite内置机制传递环境变量 #

Vite自带的loadEnv函数是核心工具，它能直接读取项目根目录下的.env系列配置文件，你可以在Playwright的配置文件中调用该函数，将变量注入到测试上下文或进程环境中：

步骤1：在Playwright配置中加载Vite变量 #

// playwright.config.ts
import { defineConfig } from '@playwright/test';
import { loadEnv } from 'vite';

// 加载对应环境的变量，第三个参数为空字符串表示加载所有前缀的变量（默认仅加载VITE_前缀）
const viteEnv = loadEnv(process.env.NODE_ENV || 'development', process.cwd(), '');

export default defineConfig({
  use: {
    // 将API地址设为测试的baseURL
    baseURL: viteEnv.VITE_API_URL,
    // 把认证令牌注入到全局请求头
    extraHTTPHeaders: {
      'Authorization': `Bearer ${viteEnv.VITE_AUTH_TOKEN}`
    }
  }
});

步骤2：在测试脚本中访问变量 #

测试里可以通过测试上下文或process.env获取变量：

// example.spec.ts
import { test } from '@playwright/test';

test('验证API访问权限', async ({ page, request }) => {
  // 从测试上下文获取baseURL
  const apiUrl = test.info().use.baseURL;
  // 直接访问process.env中的变量（需确保配置中已将viteEnv合并到process.env）
  const authToken = process.env.VITE_AUTH_TOKEN;

  const response = await request.get(`${apiUrl}/profile`, {
    headers: { 'Authorization': `Bearer ${authToken}` }
  });
  expect(response.ok()).toBeTruthy();
});

如果需要把变量注入到浏览器环境（比如页面代码要用到），可以用initScript：

// playwright.config.ts
export default defineConfig({
  use: {
    initScript: () => {
      window.__E2E_ENV__ = {
        API_URL: viteEnv.VITE_API_URL
      };
    }
  }
});

2. 最佳实践与推荐模式 #

• 统一环境变量源：共用一套.env、.env.development、.env.production文件，不要为Vite和Playwright分别维护，避免变量不一致。
• 单独的测试环境配置：创建.env.e2e文件存放测试专用变量，运行测试时指定NODE_ENV=e2e，让Vite自动加载该文件：

  // package.json
  {
    "scripts": {
      "test:e2e": "NODE_ENV=e2e playwright test"
    }
  }
  

• 敏感变量隔离：把认证令牌这类敏感变量放到.env.local，并添加到.gitignore，禁止提交到版本库。
• 类型提示支持：在项目根目录创建env.d.ts，给环境变量添加TypeScript类型，同时适配Vite和Playwright：

  // env.d.ts
  interface ImportMetaEnv {
    readonly VITE_API_URL: string;
    readonly VITE_AUTH_TOKEN: string;
  }
  
  interface ProcessEnv {
    readonly VITE_API_URL: string;
    readonly VITE_AUTH_TOKEN: string;
  }
  

• 按需注入变量：测试脚本自身用的变量直接加载到process.env，页面需要的变量通过initScript注入到浏览器，避免冗余传递。

3. 社区插件与简化方案 #

• playwright-vite插件：社区开发的插件，可自动启动Vite开发服务器，并同步Vite的环境变量到Playwright测试环境，适合开发阶段的实时测试，无需手动调用loadEnv。
• 自定义预加载脚本：如果不想用插件，可以写一个简单的预加载脚本，在运行Playwright前加载Vite变量：

  // load-vite-env.ts
  import { loadEnv } from 'vite';
  
  const env = loadEnv(process.env.NODE_ENV || 'development', process.cwd(), '');
  Object.assign(process.env, env);
  

  然后在package.json的脚本中引入：

  {
    "scripts": {
      "test:e2e": "node -r ./load-vite-env.ts playwright test"
    }
  }
  

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