Playwright自定义测试Fixture时baseURL失效问题解决

问题出在自定义fixture时没有正确继承Playwright原test实例的配置，导致baseURL未生效。只需按以下方式编写fixtures.ts，就能让自定义fixture继承配置中的baseURL：

1. 正确扩展Playwright的test实例 #

在fixtures.ts中，基于官方的base test进行扩展，而非重新创建独立的test实例：

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

// 扩展base test，添加自定义fixture逻辑（比如自动登录）
const test = base.extend({
  authenticatedPage: async ({ page }, use) => {
    // 这里可以直接用相对路径，因为继承了baseURL
    await page.goto('/login');
    await page.fill('#username', 'your-username');
    await page.fill('#password', 'your-password');
    await page.click('#login-btn');
    // 将已登录的page实例传递给测试用例
    await use(page);
  },
});

// 导出扩展后的test和expect，供测试用例导入使用
export { test, expect };

2. 确保配置文件的baseURL正确 #

确认playwright.config.ts中的baseURL配置无误：

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

export default defineConfig({
  use: {
    baseURL: 'http://localhost:3000/',
  },
});

3. 在测试用例中使用自定义fixture #

导入自定义的test后，即可像官方test一样使用相对路径调用page.goto()：

// sample.spec.ts
import { test } from './fixtures';

test('验证已登录状态下的仪表盘', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/dashboard');
  // 执行断言逻辑
  await authenticatedPage.waitForSelector('#welcome-message');
});

核心逻辑是：基于官方base test扩展出的自定义test实例，会自动继承playwright.config.ts中的所有配置项，包括baseURL，因此可以正常使用相对路径跳转。

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