Playwright JS：按钮点击拦截HTTP请求及请求体获取问题求助

问题背景 #

作为Playwright新手，需要实现以下测试场景：

• 点击按钮后触发两个HTTP请求：request1指向baseurl/session/，request2指向sessiondata
• 验证request1的响应状态码为200
• 校验request2的请求payload

该功能已在Cypress中实现，对应代码：

cy.intercept(request1).as(req1)
cy.intercept(request2).as(req2)
cy.get(button).click()
cy.get(req1).its('response.statusCode').should('eq', 200);
cy.get(req2).its("request.body").then((body) => {
  console.log(body);
});

自行编写Playwright代码时遇到两个问题：

1. 请求体打印显示为[obj][obj]
2. request2.header返回undefined

已编写的Playwright代码：

const requestPromise1 = this.page.waitForResponse((res) => 
  res.url().includes("url1") && res.status() === 202);
const requestPromise2 = this.page.waitForResponse((res) => 
  res.url().includes("url2") && res.status() === 204);

await page.locator("<button locator>").click();
                                                                                
const request1 = await requestPromise1;
const request2 = await requestPromise2;

expect(request1.status()).toBe(202);
expect(request2.status()).toBe(204);

console.log("headerheader"+request2.header)
console.log("request2"+await request2.request());                       

备注：Url1为POST请求，Url2为返回204状态码的PATCH请求，需获取其请求payload。

解决方案 #

1. 正确获取请求体 #

Playwright中，response.request()返回Request对象，直接拼接字符串会触发默认toString()，导致显示[object Object]。需通过以下方式获取请求体：

• JSON格式请求体：使用await request.json()
• 表单/原始格式：使用request.postData()
  打印时可通过JSON.stringify()格式化输出。

2. 正确获取请求头 #

Playwright的Request对象没有header属性，需调用request.headers()方法获取完整请求头对象。

3. 优化请求监听逻辑 #

如果核心需求是获取request2的请求payload，使用waitForRequest更直接，无需等待响应；若需同时校验响应状态码，也可从waitForResponse中关联获取Request对象。

修正后的代码示例 #

// 监听request1的响应，验证状态码
const responsePromise1 = page.waitForResponse(res => 
  res.url().includes("baseurl/session/") && res.request().method() === "POST");
// 监听request2的请求，直接获取请求信息
const requestPromise2 = page.waitForRequest(req => 
  req.url().includes("sessiondata") && req.method() === "PATCH");

// 触发请求
await page.locator("<button locator>").click();

// 验证request1的响应状态码
const response1 = await responsePromise1;
expect(response1.status()).toBe(200);

// 获取并校验request2的请求payload
const request2 = await requestPromise2;
// 获取JSON格式的请求体
const requestBody = await request2.json();
console.log("request2 payload:", JSON.stringify(requestBody, null, 2));
// 获取请求头
const requestHeaders = request2.headers();
console.log("request2 headers:", requestHeaders);

// 可选：验证request2的响应状态码
const responsePromise2 = page.waitForResponse(res => 
  res.url().includes("sessiondata") && res.status() === 204);
const response2 = await responsePromise2;
expect(response2.status()).toBe(204);

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