Playwright 网络监听实战：用真实响应确认自动化发布结果

浏览器自动化中的“点击成功”和“业务成功”不是同一件事。按钮可以正常点击，
页面也可能出现短暂的加载动画，但服务端请求仍可能因为参数校验、登录过期、
频率限制或审核规则而失败。要让 Playwright 流程具备生产可用性，提交结果应以
真实网络响应为核心依据，再结合页面成功状态做二次确认。

一、先注册监听，再触发操作

网络请求可能在点击后立即返回。如果先点击按钮、再开始等待响应，就存在漏掉
快速响应的竞态条件。稳定的顺序是先创建等待任务，然后执行点击。

const saveResponse = page.waitForResponse(response =>
  response.url().includes('/api/posts') &&
  response.request().method() === 'POST'
);

await page.getByRole('button', { name: '发布' }).click();
const response = await saveResponse;

这个结构可以保证监听器在请求产生之前已经就绪。对于弹窗二次确认场景，应把
监听注册在最终确认按钮之前，而不是注册在打开弹窗的第一个按钮之前。

二、同时检查 HTTP 状态和业务字段

HTTP 200 只表示服务器成功返回了一个响应，并不代表业务操作一定成功。很多接口
会在 JSON 中提供 code、success、message 或业务数据字段。

if (!response.ok()) {
  throw new Error(`HTTP 请求失败: ${response.status()}`);
}

const body = await response.json();
if (!body.id || !body.url) {
  throw new Error(`接口未返回文章标识: ${JSON.stringify(body)}`);
}

对发布流程而言，文章 ID 和公开 URL 是非常有价值的结果。它们不仅可以写入任务
记录，还可以用于后续批量确认发布状态时进行精确匹配，避免仅凭标题误认同名文章。

三、过滤真正的手动提交请求

编辑器通常会自动保存草稿。只按 URL 匹配响应时，监听器可能捕获到自动备份，
而不是用户点击发布产生的请求。应进一步检查请求方法和请求体。

const response = await page.waitForResponse(async response => {
  if (!response.url().endsWith('/api/posts')) return false;
  if (response.request().method() !== 'POST') return false;

  const payload = response.request().postDataJSON();
  return payload.isPublished === true &&
         payload.isDraft === false;
});

对于草稿和正式发布共用接口的平台，这一步尤其重要。它能区分自动备份、手动保存
草稿和正式发布，避免流程返回“假成功”。

四、接口成功后继续确认页面状态

接口成功是主要依据，但页面跳转或成功提示仍然值得检查。它可以发现前端处理响应
时发生的异常，也能确认用户最终会看到正确结果。

await page.waitForURL(url =>
  url.pathname.includes('/articles/edit-done') &&
  url.href.includes('isPublished=true')
);

页面确认应当有独立超时和明确错误信息。如果接口已经成功而页面没有跳转，日志应
清楚说明“接口成功但成功页超时”，而不是简单地报告发布失败。

五、把监听结果带入后续流程

一次发布操作至少应输出文章 ID、目标 URL、响应摘要和耗时。下游可以用这些信息
执行状态确认、失败重试或审计记录。

return {
  articleId: String(body.id),
  targetUrl: body.url,
  durationMs: Date.now() - startTime
};

总结

可靠的 Playwright 发布流程应该遵循“先监听、再点击、校验请求、解析响应、确认页面”
的顺序。与固定等待相比，网络响应提供了更直接的业务证据；与单纯检查 HTTP 状态相比，
请求体和业务字段又能进一步排除自动备份和业务失败。把这些信号组合起来，自动化流程
才能真正做到可验证、可诊断和可维护。

说明：本文根据实际 Playwright 自动化开发经验整理，并使用 AI 辅助润色；
示例代码用于展示网络监听和结果确认的设计方法。