Playwright循环测试中索引值无法正确传递至beforeEach/afterEach求助

我希望将测试用例放在循环中执行，借助beforeEach和afterEach处理测试前后的逻辑，同时使用循环的索引值，但出现异常：测试标题中的索引值正确，但beforeEach、afterEach和测试用例内部打印的索引始终是循环结束后的最后一个值6。

示例代码

let index: number;
test.describe('Inside a loop test', async () => {
    test.beforeEach(async() => {
        console.log('Before each #' + index);
    });
    for (index = 0; index <= 5; index++) {
        test('Test #' + index, async({}, testInfo) =>{
            console.log('Test name: ' + testInfo.title);
            console.log('Test #' + index);
        });
    }
    test.afterEach(async() => {
        console.log('After each #' + index);
    });
});

输出结果

Running 6 tests using 1 worker

Before each #6
Test name: Test #0
Test #6
After each #6

Before each #6
Test name: Test #1
Test #6
After each #6

Before each #6
Test name: Test #2
Test #6
After each #6

Before each #6
Test name: Test #3
Test #6
After each #6

Before each #6
Test name: Test #4
Test #6
After each #6

Before each #6
Test name: Test #5
Test #6
After each #6
  6 passed (658ms)

问题原因 #

这是JavaScript/TypeScript的闭包特性导致的：循环中声明的index是同一个变量引用，beforeEach、afterEach和测试用例的回调函数都是异步执行的，当这些回调实际运行时，循环已经执行完毕，index的值已经变成6，因此所有回调都会拿到这个最终值。

解决方法 #

方法1：修复闭包问题+测试元数据传递 #

将循环变量改为块级作用域的let，同时给每个测试用例附加元数据，让beforeEach和afterEach能获取到当前测试对应的索引值：

test.describe('Inside a loop test', async () => {
    test.beforeEach(async({}, testInfo) => {
        const index = testInfo.test.metadata.index;
        console.log('Before each #' + index);
    });

    // 使用let声明循环变量，每次循环创建独立的变量引用
    for (let index = 0; index <= 5; index++) {
        test('Test #' + index, async({}, testInfo) =>{
            console.log('Test name: ' + testInfo.title);
            console.log('Test #' + index);
        }).meta({ index }); // 给测试用例附加索引元数据
    }

    test.afterEach(async({}, testInfo) => {
        const index = testInfo.test.metadata.index;
        console.log('After each #' + index);
    });
});

方法2：使用Playwright官方参数化测试（推荐） #

Playwright提供了test.each或test.describe.each的参数化测试方式，更符合框架最佳实践，无需手动处理闭包问题：

// 生成测试参数数组：[0,1,2,3,4,5]
const testCases = Array.from({ length: 6 }, (_, i) => i);

test.describe('Parameterized loop test', async () => {
    test.beforeEach(async({}, testInfo) => {
        // 从测试参数中获取当前索引
        const index = testInfo.parameters[0];
        console.log('Before each #' + index);
    });

    // 使用test.each实现参数化测试
    test.each(testCases)('Test #%i', async({}, testInfo, index) => {
        console.log('Test name: ' + testInfo.title);
        console.log('Test #' + index);
    });

    test.afterEach(async({}, testInfo) => {
        const index = testInfo.parameters[0];
        console.log('After each #' + index);
    });
});

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