如何拆分Playwright多Fixture至独立文件并通过basePage.ts统一导出

你的核心需求是把页面Fixture拆分到独立文件，通过basePage.ts统一导出以避免其体积膨胀，同时让测试文件能直接通过basePage.ts的test使用各个页面Fixture。下面是正确的实现方式：

1. 保留 myPagesFixture.ts 逻辑 #

这个文件专门负责定义所有页面的Fixture，原有代码无需改动：

import { test as pagesTest } from '@playwright/test';
import { signupPage } from '../pages/signupPage'
import { addInfoPage } from '../pages/addInfoPage'

type Pages = {
    registration: signupPage;
    addInfo: addInfoPage;
}

export const test = pagesTest.extend<Pages>({
    registration: async ({ page }, use) => {
        await use(new signupPage(page))
    },

    addInfo: async ({ page }, use) => {
        await use(new addInfoPage(page))
    }
})

2. 重构 basePage.ts #

无需基于原始baseTest重新extend，直接复用myPagesFixture中已扩展好的test即可；如果后续需要添加全局通用Fixture，也可以在此基础上继续扩展：

// 导入页面Fixture扩展后的test实例
import { test as pagesTest } from './myPagesFixture';
import { expect, Page, BrowserContext } from '@playwright/test';

// 可选：添加全局通用Fixture（如工具方法、全局配置）
export const test = pagesTest.extend({
    commonTools: async ({ page }, use) => {
        await use({
            waitForLoading: () => page.waitForSelector('.loading', { state: 'hidden' })
        });
    }
});

// 统一导出Playwright常用对象
export { expect, Page, BrowserContext };

如果不需要额外的全局Fixture，直接导出即可：

export { test } from './myPagesFixture';
export { expect, Page, BrowserContext } from '@playwright/test';

3. 测试文件正常使用 #

你的测试文件写法完全符合预期，直接导入basePage.ts的test就能调用所有页面Fixture：

import { test } from './fixtures/basePage'

test('register and add info', async ({ registration, addInfo, commonTools }) => {
   await registration.goToSignupUrl();
   await registration.enterEmail(loginData.adminEmail);
   await registration.enterPassword(loginData.password);
   await registration.clickSignupButton();
   await commonTools.waitForLoading(); // 若添加了通用Fixture可直接调用
   await addInfo.clickAddInfoButton();
   await addInfo.enterName(userData.name);
   await addInfo.enterBirthdate(userData.birthdate);
   await addInfo.clickAddUserInfo();
});

关键说明 #

Playwright的test.extend支持链式扩展，基于已扩展的test继续extend会自动继承之前所有的Fixture类型与定义，完美实现拆分复用的需求。后续新增页面Fixture时，只需在myPagesFixture.ts中添加对应的页面类和Fixture定义，basePage.ts无需修改（除非新增全局Fixture）。

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