JavaScript Playwright 我如何编写一个测试来确保操作导致一次服务器调用而不是无限的服务器调用

Question

我正在编写一个 JavaScript 应用程序并使用 Playwright 来测试我的应用程序。

我在代码中发现了一个错误，在选择列表中的项目时，我的应用程序陷入了调用服务器 API 的无限循环中。

如何编写剧作家测试以确保操作仅导致单个服务器调用。

示例代码

我使用类似以下内容等待该项目可见

await page.locator('list1','file1').waitFor();

然后我选择并等待服务器请求，代码类似于beloe

const responsePromise = page.waitForResponse(resp => 
resp.url().includes('/myServerURL') && resp.status() === 200);
await page.locator('list1','file1').click();
const response = await responsePromise;

但我想确保在选择项目时只收到一个对“/myServerURL”的请求，而不是多个。

这在剧作家中可能吗

Answer 1

这当然是可能:

const requestPredicate = req =>
  req.method() === "GET" && req.url().includes('/myServerURL');

const requestPromises = [
  page.waitForRequest(requestPredicate, {timeout: 500}),
  page.waitForRequest(requestPredicate, {timeout: 500}),
];
await page.locator('list1', 'file1').click();

const [response] = await Promise.all(requestPromises)
  .catch(err => {
    if (!response) throw err;
  });

// assertion implicitly passed

但我认为这不是一个好主意。它很慢（在 CI 中额外的一秒会花费大量时间，并且减少它会鼓励误报）、编码繁琐并且过于偏执。如果页面上对同一端点的其他请求碰巧同时触发，您将看到误报。

我更关注用户体验而不是网络活动。在给定更多上下文的情况下，可能有更好的方法来验证这一点。