如何为Playwright配置添加可覆盖的自定义TypeScript属性及复杂对象实现

1. 定义TypeScript类型 #

先在测试类型文件（比如test.d.ts）里扩展TestOptions，明确复杂对象的类型结构：

import { test as base } from '@playwright/test';

// 定义复杂对象的具体类型
interface EnvConfig {
  apiUrl: string;
  timeout: number;
  credentials: {
    username: string;
    password: string;
  };
}

// 扩展Playwright的TestOptions，加入自定义复杂属性
interface TestOptions {
  envConfig: EnvConfig;
}

export const test = base.extend<TestOptions>({});

2. 在base.extend中配置可覆盖的复杂对象选项 #

和简单属性逻辑一致，给复杂对象设置默认值并标记option: true，开启配置覆盖权限：

export const test = base.extend<TestOptions>({
  // 配置复杂对象的默认值，同时标记为可覆盖选项
  envConfig: [
    {
      apiUrl: 'https://default-api.example.com',
      timeout: 30000,
      credentials: {
        username: 'default-user',
        password: 'default-pass'
      }
    },
    { option: true } // 关键：允许在配置文件中覆盖该属性
  ]
});

3. 在playwright.config.ts中全局/项目级覆盖 #

现在可以在全局use区设置默认值，也能在具体项目中完全或部分覆盖这个复杂对象：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  // 全局use区设置默认的复杂对象配置
  use: {
    envConfig: {
      apiUrl: 'https://global-api.example.com',
      timeout: 20000,
      credentials: {
        username: 'global-user',
        password: 'global-pass'
      }
    }
  },

  projects: [
    {
      name: 'staging',
      // 项目级完全覆盖复杂对象，优先级高于全局配置
      use: {
        envConfig: {
          apiUrl: 'https://staging-api.example.com',
          timeout: 25000,
          credentials: {
            username: 'staging-user',
            password: 'staging-pass'
          }
        }
      }
    },
    {
      name: 'production',
      // 仅覆盖复杂对象中的部分属性，其余继承全局默认值
      use: {
        envConfig: {
          apiUrl: 'https://prod-api.example.com'
          // timeout和credentials会沿用全局的20000、global-user/global-pass
        }
      }
    }
  ]
});

4. 在测试用例中使用复杂对象配置 #

在测试里可以直接通过参数获取并使用这个复杂对象：

import { test } from './test';

test('使用复杂配置', async ({ page, envConfig }) => {
  await page.goto(envConfig.apiUrl);
  await page.fill('#username', envConfig.credentials.username);
  await page.fill('#password', envConfig.credentials.password);
  await page.click('#submit', { timeout: envConfig.timeout });
});

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