本文介绍如何通过监听网络请求事件，在 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变量，防止测试间状态污染。
通过该方法，你不再依赖不可靠的 UI 副作用（如按钮禁用、loading 状态），而是直接观测应用真实的网络意图，使测试更稳定、语义更清晰、调试更高效。
