如何在 Playwright 测试中验证特定 API 请求未被触发-js教程-PHP中文网

如何在 Playwright 测试中验证特定 API 请求未被触发

本文介绍如何通过监听网络请求事件，在 Playwright 中可靠地断言某个 API（如消息提交接口）在用户执行 Shift+Enter 等非提交操作时确实未发起，从而精准验证前端行为逻辑。

本文介绍如何通过监听网络请求事件，在 playwright 中可靠地断言某个 api（如消息提交接口）在用户执行 shift+enter 等非提交操作时**确实未发起**，从而精准验证前端行为逻辑。

在测试聊天应用的输入行为时，仅检查 DOM 状态（如输入框值、表单是否提交）往往不够——例如 form.submit() 可能被阻止，但实际仍通过 fetch 或 axios 主动调用后端 API。因此，验证网络层是否真正发出请求，才是判断“消息是否发送”的黄金标准。

Playwright 提供了强大的 page.on('request') 事件监听机制，可捕获所有发出的网络请求。结合布尔标记与 waitForLoadState('networkidle')，即可实现对“零请求”的确定性断言。

以下为完整、健壮的测试写法示例：

Playwright Browser Automation

使用Playwright API直接进行浏览器自动化。导航网站、与元素交互、提取数据、截图、生成PDF、录制视频，自动化复杂工作流程。比MCP方法更可靠。

下载

test("pressing Enter should send message and trigger API request", async ({ page }) => {
  await page.goto("/chat");
  const input = page.getByRole("textbox");

  // 监听目标 API 请求（如 POST /api/messages）
  let messageSent = false;
  page.on("request", (request) => {
    if (request.method() === "POST" && request.url().includes("/api/messages")) {
      messageSent = true;
    }
  });

  await input.fill("Hello world");
  await input.press("Enter");

  // 等待网络空闲，确保所有请求已发出/完成
  await page.waitForLoadState("networkidle");

  // ✅ 断言：请求已被发出
  expect(messageSent).toBe(true);
  // ✅ 同时可补充 UI 断言（如输入框清空、消息列表新增）
  await expect(input).toHaveValue("");
});

test("pressing Shift+Enter should insert line break and NOT send API request", async ({ page }) => {
  await page.goto("/chat");
  const input = page.getByRole("textbox");

  let messageSent = false;
  page.on("request", (request) => {
    if (request.method() === "POST" && request.url().includes("/api/messages")) {
      messageSent = true;
    }
  });

  await input.fill("First line");
  await input.press("Shift+Enter"); // 注意：Playwright 中需写为 "Shift+Enter"，非 "Shift+Return"

  // 等待网络稳定，排除异步延迟请求干扰
  await page.waitForLoadState("networkidle");

  // ✅ 断言：请求未被触发
  expect(messageSent).toBe(false);
  // ✅ 验证换行符正确插入（统一使用 \n；浏览器 textarea 的 value 始终返回 \n，不为 \r\n）
  await expect(input).toHaveValue("First line\n");
});

⚠️ 关键注意事项：

监听时机：务必在触发用户操作（如 press()）之前注册 page.on('request')，否则可能遗漏请求；
URL 匹配要严谨：建议同时校验 method() 和 url()，避免误判其他同路径请求（如 GET 配置接口）；
换行符说明：HTML <textarea></textarea> 元素的 .value 属性始终返回 \n 作为换行符，即使系统为 Windows；无需处理 \r\n；
避免竞态：waitForLoadState('networkidle') 是关键——它等待至少 500ms 无新网络请求，确保“无请求”状态真实可靠；
作用域隔离：每个测试应独立声明 messageSent 变量，防止测试间状态污染。