如何在不使用全局配置的情况下设置Playwright的baseUrl

如果你不想依赖playwright.config.ts，可以通过以下几种方式统一设置baseUrl：

1. 封装自定义初始化模块 #

创建一个复用的工具模块，把baseUrl和浏览器初始化逻辑封装在一起，所有测试文件导入这个模块即可：

比如新建test-setup.ts：

import { chromium, Browser, Page } from '@playwright/test';

// 定义通用baseUrl
export const BASE_URL = 'https://your-target-domain.com';

// 封装浏览器和页面的初始化逻辑
export async function initTestEnv(): Promise<{ browser: Browser; page: Page }> {
  const browser = await chromium.launch({ headless: false }); // 根据需求配置启动参数
  const page = await browser.newPage();
  return { browser, page };
}

在测试文件中使用：

import { test, expect } from '@playwright/test';
import { BASE_URL, initTestEnv } from './test-setup';

test('访问目标路径', async () => {
  const { browser, page } = await initTestEnv();
  await page.goto(`${BASE_URL}/user/profile`);
  
  // 执行测试断言
  await expect(page.locator('h1')).toHaveText('用户中心');
  
  await browser.close();
});

2. 使用环境变量传递baseUrl #

通过环境变量注入baseUrl，避免硬编码，还能灵活切换环境：

方式一：启动测试时直接指定 #

在package.json的脚本中添加：

"scripts": {
  "test:dev": "BASE_URL=https://dev.example.com npx playwright test",
  "test:prod": "BASE_URL=https://prod.example.com npx playwright test"
}

测试文件中读取环境变量：

import { test, expect } from '@playwright/test';

// 读取环境变量，设置默认值兜底
const BASE_URL = process.env.BASE_URL || 'https://default.example.com';

test('验证首页内容', async ({ page }) => {
  await page.goto(`${BASE_URL}/`);
  await expect(page.title()).toBe('首页');
});

方式二：用.env文件管理（可选） #

如果需要多个环境变量，可以用dotenv包加载本地配置：

1. 安装dotenv：npm install dotenv --save-dev
2. 新建.env文件：

BASE_URL=https://your-domain.com

3. 在测试文件顶部加载：

import 'dotenv/config';
import { test, expect } from '@playwright/test';

const BASE_URL = process.env.BASE_URL!;

test('测试接口', async ({ request }) => {
  const response = await request.get(`${BASE_URL}/api/user`);
  expect(response.ok()).toBeTruthy();
});

3. 扩展测试上下文（适用于Playwright Test Runner） #

如果使用Playwright的官方测试运行器，可以通过test.extend()扩展上下文，注入baseUrl：

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

// 扩展测试上下文，添加baseUrl
export const test = base.extend({
  baseUrl: ['https://your-base-url.com', { option: true }],
});

// 在测试中直接使用
test('跳转子页面', async ({ page, baseUrl }) => {
  await page.goto(`${baseUrl}/about`);
  await expect(page.locator('h2')).toHaveText('关于我们');
});

这种方式不需要全局配置文件，每个测试文件可以单独扩展，也可以把扩展逻辑抽成公共模块复用。

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