Playwright自动Fixture中page.on('response')监听器失效问题排查

问题背景 #

我正尝试创建一个可在所有测试中复用的page.on('response')事件监听器Fixture。目前，当代码库中出现特定事件时，UI会显示一个带特定ID的div。我通过创建独立方法并在beforeEach钩子中调用的方式实现了需求，但想了解是否能将其实现为自动Fixture。

失败的自动Fixture尝试代码 #

// helper.js

exports.test = base.test.extend({
  responseMacroErrorCheck: [async ({ page }) => {
    page.on('response', data => {
      if (data) {
        data.body().then(b => {
          let ioCheck = b.indexOf('example')
          if (b && ioCheck !== -1) {
            process.stdout.write(`Macro error detected on page (example)`)
            process.stdout.write(`${b.toString().substring(ioCheck - 500, ioCheck + 500)}`)
            throw new Error(`Macro error detected on page (example)\n${b})}`)
          }
        })
      }
    })
    await use('responseMacroErrorCheck') // 错误调用
  }, { scope: 'test', auto: true }],
})

// error.spec.js

const scanUrlList = [
  'myUrl'
]

test.describe('Scan URL list for macro errors', () => {
  scanUrlList.forEach(ele => {
    test(ele, async ({ page }) => {
      await page.goto(`myUrl`)
    })
  })
})

可正常运行的手动调用方式 #

// helper.js

export const responseMacroErrorCheck = async (page) => {
  page.on('response', data => {
    if (data) {
      data.body().then(b => {
        let ioCheck = b.indexOf('example')
        if (b && ioCheck !== -1) {
          process.stdout.write(`Macro error detected on page (example)`)
          process.stdout.write(`${b.toString().substring(ioCheck - 500, ioCheck + 500)}`)
          throw new Error(`Macro error detected on page (example)\n${b})}`)
        }
      })
    }
  })
}

// error.spec.js

test.beforeEach(async ({ page }) => {
  await h.responseMacroErrorCheck(page)
})

我想知道在自动Fixture配置中是否遗漏了什么？还是page触发的事件无法在自动Fixture中被识别？

问题分析与解决方案 #

你的自动Fixture配置存在两个关键问题：

1. 错误调用use('responseMacroErrorCheck')：在Fixture的定义函数内部，不能调用use来获取自身Fixture，这会导致循环引用，直接移除这一行即可。
2. 异步错误未被正确捕获：data.body().then()回调中的throw new Error属于Promise内部的错误，不会被Playwright的测试上下文捕获，需要改用async/await来处理异步操作，确保错误能被测试框架感知到。

修正后的自动Fixture代码 #

// helper.js

const { test: base } = require('@playwright/test');

exports.test = base.test.extend({
  responseMacroErrorCheck: [async ({ page }, use) => {
    // 定义异步的响应处理函数
    const handleResponse = async (data) => {
      if (!data) return;
      try {
        const b = await data.body();
        const ioCheck = b.indexOf('example');
        if (b && ioCheck !== -1) {
          const errorMsg = `Macro error detected on page (example)\n${b.toString().substring(ioCheck - 500, ioCheck + 500)}`;
          process.stdout.write(errorMsg);
          throw new Error(errorMsg);
        }
      } catch (err) {
        // 确保错误被抛出到测试上下文
        throw err;
      }
    };

    page.on('response', handleResponse);
    // 执行测试逻辑
    await use();
    // 测试结束后移除监听器（可选，避免内存泄漏）
    page.off('response', handleResponse);
  }, { scope: 'test', auto: true }],
});

测试文件的正确使用方式 #

// error.spec.js

const { test } = require('./helper.js'); // 导入扩展后的test

const scanUrlList = [
  'myUrl'
];

test.describe('Scan URL list for macro errors', () => {
  scanUrlList.forEach(ele => {
    test(ele, async ({ page }) => {
      await page.goto(`myUrl`);
    });
  });
});

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