Playwright中使用page.on('response')监听时如何正确获取响应body内容

page.on('response') 事件在响应头接收完成时就会触发，此时响应体可能未完全加载，同时没有做异常捕获的情况下，请求取消、跨域限制、响应失败等场景都会导致response.body()调用抛出异常，异步函数报错后返回的Promise对象被拼接进字符串，就会输出[object Promise]。

方式1：response事件监听适配 #

page.on('response', async response => {
    if (response.url().endsWith("verifica_autenticidade?ck=0")){
        try {
            // 过滤失败请求，避免读取body报错
            if(!response.ok()) {
                console.log('目标请求失败，状态码：', response.status())
                return
            }
            // 按需选择读取方法，不需要转码直接用response.body()，文本用text()，JSON用json()
            const respBody = await response.text()
            console.log('body=== > ', respBody)
        } catch (err) {
            console.log('读取响应体失败：', err.message)
        }
    }
});

方式2：waitForResponse定向等待（更推荐可控场景使用） #

如果目标请求是由特定操作触发（比如点击按钮、提交表单），优先用waitForResponse写法，逻辑更稳定，不会漏听请求：

// 先注册等待目标请求的Promise
const targetResponse = page.waitForResponse(resp => resp.url().endsWith("verifica_autenticidade?ck=0"))
// 执行触发请求的操作，比如点击提交按钮
await page.getByRole('button', {name: '提交'}).click()
// 等待请求返回后读取响应体
const resp = await targetResponse
const respBody = await resp.json()
console.log('body=== > ', respBody)

• response.body()返回的是Buffer二进制对象，需要文本/JSON格式响应时直接调用response.text()/response.json()更方便
• 必须加异常捕获，避免请求异常导致的后续逻辑中断
• 不要直接在字符串拼接语句中使用await表达式，先赋值给变量再拼接/打印，避免异步异常导致的输出异常

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