使用Playwright测试多环境时如何覆盖baseUrl及各环境登录凭据配置

一、动态覆盖baseUrl配置 #

通过运行时传入环境变量+配置映射的方式实现，无需修改配置文件本身，具体步骤如下：

• 步骤1：修改playwright.config.js/ts配置，新增环境映射表

// playwright.config.js
import { defineConfig } from '@playwright/test';

// 各环境与对应baseUrl映射表
const envBaseUrlMap = {
  test1: 'https://www.test1.com',
  test2: 'https://www.test2.com',
  test3: 'https://www.test3.com',
  test4: 'https://www.test4.com'
}
// 读取运行时传入的目标环境标识，未指定时默认使用test1环境
const targetEnv = process.env.TEST_ENV || 'test1';

export default defineConfig({
  // 其余原有配置保持不变
  use: {
    // 动态绑定对应环境的baseUrl
    baseURL: envBaseUrlMap[targetEnv],
  }
})

• 步骤2：运行用例时指定目标环境
  • Mac/Linux环境执行命令：
    TEST_ENV=test2 npx playwright test
  • Windows PowerShell环境执行命令：
    $env:TEST_ENV="test2"; npx playwright test
    上述命令会自动将baseUrl切换为test2环境的地址。

二、按环境传入登录凭据 #

推荐使用dotenv加载对应环境的敏感配置，避免硬编码凭据泄露，步骤如下：

• 步骤1：安装dotenv依赖
  npm install dotenv --save-dev
• 步骤2：在项目根目录创建对应环境的变量文件，分别命名为.env.test1、.env.test2、.env.test3、.env.test4，每个文件内填写对应环境的登录参数，示例如下：

# .env.test1 示例内容
TEST_USERNAME=test1_admin
TEST_PASSWORD=test1@2024

注意：请将所有.env后缀的文件加入.gitignore，避免敏感信息提交到代码仓库。

• 步骤3：修改配置文件加载对应环境的变量
  在playwright.config.js/ts顶部添加加载逻辑：

import dotenv from 'dotenv';
// 加载对应环境的变量文件
dotenv.config({ path: `.env.${targetEnv}` });

同时在配置的use字段中挂载全局凭据，方便测试用例直接调用：

use: {
  baseURL: envBaseUrlMap[targetEnv],
  username: process.env.TEST_USERNAME,
  password: process.env.TEST_PASSWORD,
}

• 步骤4：测试用例中直接调用凭据

test('环境适配登录验证', async ({ page, use }) => {
  await page.goto('/login');
  // 直接读取当前环境的用户名密码
  await page.getByLabel('用户名').fill(use.username);
  await page.getByLabel('密码').fill(use.password);
  await page.getByRole('button', { name: '登录' }).click();
})

如果是TypeScript项目，需要先扩展Playwright的TestOptions类型避免类型报错，在项目中新增类型声明文件即可：

// types/playwright.d.ts
import { test as base } from '@playwright/test';

type TestOptions = {
  username: string;
  password: string;
}

export const test = base.extend<TestOptions>({
  username: '',
  password: '',
});

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