Playwright-Node中如何参数化Fixture适配不同视图场景？

我有一个包含Fixture和测试扩展的标准文件：

import { test } from "@playwright/test"

export type pages = {
    functionality: Functionality
}

export const base = test.extend<pages>({
    functionality: async ({ page }, use) => {
        const func = new Functionality(page);
        await func.navigateTo()

        await use(func);

        // 关闭上下文
        await page.close()
    }
});

测试文件代码如下：

test.describe('', () => {
    test.use({ storageState: "storageState_view_1" })
    test('', async ({ functionality }) => {
        
    })
})

test.describe('', () => {
    test.use({ storageState: "storageState_view_2" })
    test('', async ({ functionality }) => {

    })
})

问题在于await func.navigateTo()用于跳转至功能模块（比如点击侧边栏），但第一个describe的用户需要点击侧边栏的"a_certain_item"，第二个describe的用户视图不同，功能模块对应的侧边栏项名称不同。现在定义两个重复的Fixture不够优雅，请问是否可以从测试中传递参数来参数化Fixture？

当然可以通过参数化Fixture实现，不需要重复定义多个Fixture。具体步骤如下：

1. 扩展Fixture类型，添加导航参数配置 #

首先修改pages类型，新增一个用于传递导航参数的配置项：

import { test } from "@playwright/test"

export type pages = {
    functionality: Functionality
    // 新增导航参数配置，用于指定侧边栏项名称
    functionalityNavItem: string
}

2. 修改Fixture实现，接收并使用参数 #

调整functionality Fixture的逻辑，读取配置参数并传递给navigateTo方法，同时给参数设置默认值避免测试未传递时报错：

export const base = test.extend<pages>({
    // 设置默认导航项，作为 fallback
    functionalityNavItem: "default_sidebar_item",
    functionality: async ({ page, functionalityNavItem }, use) => {
        const func = new Functionality(page);
        // 将参数传入导航方法，动态指定侧边栏项
        await func.navigateTo(functionalityNavItem)

        await use(func);

        await page.close()
    }
});

需要同步修改Functionality类的navigateTo方法，让它支持接收侧边栏项名称参数：

class Functionality {
    constructor(private page: Page) {}

    async navigateTo(navItem: string) {
        // 根据传入的参数点击对应侧边栏项
        await this.page.locator(`text=${navItem}`).click();
        // 其他导航相关逻辑（如等待页面加载）...
    }
}

3. 在测试中通过test.use传递参数 #

在不同的describe块中，结合storageState一起传递对应的侧边栏项名称：

test.describe('视图1功能测试', () => {
    test.use({ 
        storageState: "storageState_view_1",
        functionalityNavItem: "a_certain_item"
    })
    test('验证功能模块逻辑', async ({ functionality }) => {
        // 测试逻辑代码...
    })
})

test.describe('视图2功能测试', () => {
    test.use({ 
        storageState: "storageState_view_2",
        functionalityNavItem: "another_sidebar_item"
    })
    test('验证功能模块逻辑', async ({ functionality }) => {
        // 测试逻辑代码...
    })
})

这样就能在不同测试场景中复用同一个Fixture，通过参数动态控制导航行为，彻底避免重复代码。

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