如何使用Playwright编写测试确保操作仅触发一次服务器调用而非无限循环调用

这个场景我太有共鸣了——不小心写出无限API循环的bug真的让人头大，不过好在Playwright提供了好几套方案，能帮我们精准验证这类行为！结合你的场景，我给你整理几个实用的测试思路：

方法一：监听所有请求并统计数量 #

最直接的方式就是在操作开始前，开启一个请求监听器，收集所有匹配目标API的请求，之后检查数量是否为1。这种方法简单直观，适合快速验证：

// 初始化数组来存储匹配的请求
const matchingRequests = [];
page.on('request', (request) => {
  if (request.url().includes('/myServerURL')) {
    matchingRequests.push(request);
  }
});

// 执行触发操作（点击列表项）
await page.locator('list1', 'file1').click();

// 等待足够时间确保没有后续请求（时间根据你的API响应速度调整，比如1秒）
await page.waitForTimeout(1000);

// 断言请求数量严格等于1
expect(matchingRequests.length).toBe(1);

方法二：用Route拦截计数+Mock API（推荐） #

如果需要模拟特定的API返回（比如你场景里的空map响应），同时统计请求次数，page.route会是更灵活的选择。这样你可以完全复现触发循环的场景，验证修复后的代码是否真的只发一次请求：

// 第一步：Mock目标API返回空map（模拟原来触发循环的异常场景）
await page.route('/myServerURL', async (route) => {
  await route.fulfill({
    status: 200,
    body: JSON.stringify({}) // 返回空map
  });
});

// 第二步：统计请求次数
let requestCount = 0;
await page.route('/myServerURL', async (route) => {
  requestCount++;
  await route.continue();
});

// 执行点击操作
await page.locator('list1', 'file1').click();

// 等待UI状态稳定（比如等待选中状态出现，比固定超时更可靠）
await page.waitForSelector('.selected-item', { state: 'visible' });
// 再给一点缓冲时间，确保没有后续请求
await page.waitForTimeout(500);

// 断言仅触发一次请求
expect(requestCount).toBe(1);

方法三：用WaitForResponse+超时检测额外请求 #

如果你习惯用waitForResponse的写法，可以扩展成：先等待第一个响应返回，再设置一个短超时，检测是否会出现第二个响应——如果出现就说明有循环，直接断言失败：

// 等待第一个合法响应
const firstResponsePromise = page.waitForResponse(resp => 
  resp.url().includes('/myServerURL') && resp.status() === 200);
await page.locator('list1', 'file1').click();
await firstResponsePromise;

// 尝试等待第二个响应，超时时间设为1秒
try {
  await page.waitForResponse(resp => 
    resp.url().includes('/myServerURL') && resp.status() === 200, { timeout: 1000 });
  // 如果走到这里，说明出现了第二个请求，断言失败
  expect(true).toBe(false);
} catch (error) {
  // 超时无响应，符合预期（没有循环）
}

一些小提示 #

• 超时时间别瞎设：要根据你的API正常响应时间调整，比如如果API通常200ms返回，设1秒足够覆盖，又不会让测试拖太久。
• 优先用UI状态等待：比如等待选中元素出现、数据加载完成的提示消失，比固定超时更可靠，避免因环境差异导致的误判。
• 结合你的修复逻辑：测试时一定要模拟触发原来bug的场景（比如返回空map），这样才能真正验证修复是否生效。

备注：内容来源于stack exchange，提问作者se22as