我们如何在 Cypress 中等待网络请求？

Question

我正在尝试验证已触发网络请求（记录指标），但该指标未绑定到特定用户操作（指标在视频播放 2 秒后触发）。

从 docs on wait 来看，所有这些似乎都基于一种模型，在这种模型中，网络请求会因某些用户操作而被激发，或者可以以某种方式排序，这反过来又推广到可以预测的情况order（从某种意义上说它不依赖于另一个动作）和网络请求的 timing（它不是随机排序的）与触发到同一端点的其他网络请求相比）。

所以对于下面的示例，这是有效的，因为这 (1) 具有可预测的顺序（它始终遵循点击操作），并且 (2) 每次都遵循用户点击的时间（不会有第二个请求到在点击和网络请求之间触发的同一端点）。

beforeEach(() => {
  // omitting setup code
  cy.server();
  cy.route({ method: 'POST', url: VISUAL_MODE_ENDPOINT }).as('visual-mode-toggle');
});

it('should save the visual mode preference and change the page to dark mode', () => {
  cy.get('.visual-mode-toggle').click();
  cy.wait('@visual-mode-toggle')
    .get(xhr => {/* omitting asserting the request is fired and returns a 200 */});
  
  // UI tests omitted
});

但是，对于我的用例，我希望能够断言某些指标已被触发。我正在构建的应用程序通过网络调用记录了许多指标，但我只想测试一个特定指标。（注意：所有指标都记录到同一个端点。）所以我尝试了这样的事情：

beforeEach(() => {
  cy.server();
  cy.route({ method: 'POST', url: METRICS_ENDPOINT }).as('metrics');
});

it('should fire a metric when the video is viewed for more than 2 seconds', () => {
  cy.wait('@metrics') // this is problematic
    .get<Cypress.WaitXHR[]>('@metrics.all')
    .then(xhrs => {
      const videoPlayInViewportRequests = Array
        .from(xhrs)
        .filter(isVideoPlayInViewport);

      videoPlayInViewportRequests.forEach(xhr => expect(getJSONPayload(xhr)).to.include('viewers'));
      
      expect(videoPlayInViewportRequests.length).to.not.equal(0);
    });
});

事实证明这是片状的（它有时通过，但更频繁地失败），不是因为 Cypress 本身，而是因为指标在应用程序中的触发方式，原因有两个：

不可预测的顺序。 除了这个“播放至少 2 秒”指标之外，还有其他指标在两者之间发出，比如它花费的时间播放器加载第一帧，以及其他页面加载指标。没有逻辑保证这些指标的顺序，因此无法确定它们被触发的顺序。
不可预测的时间。我们也不知道它出现的确切时间。有时，指标恰好在重试限制内触发，但有时却没有。

所以我们得到以下场景（假设重试限制为 5 秒，并且所有指标都通过同一端点触发）：

2 秒指标（3 秒）-> 其他指标（7 秒）（成功，因为这是我们用 cy.wait 等待的第一个网络请求）
2 秒指标（6 秒）-> 其他指标（7 秒）（失败，因为它在重试限制后触发）
其他指标（2 秒）-> 2 秒指标（3 秒）（失败，因为我们只调用了 cy.wait 一次）
其他指标（6 秒）-> 2 秒指标（7 秒）（失败，超出重试限制）

如果我们编写 cy.wait('@metrics').wait('@metrics')，它可以修复场景 3，但不能保证，因为中间可能会触发更多指标。

所以我的问题是：

我们如何在这种情况下实现等待？我在想像循环直到我们找到我们正在寻找的东西，但它看起来非常不像赛普拉斯：

let needToWait = true;
const startTime = Date.now();

do {
  cy.wait('@metrics')
    .get<Cypress.WaitXHR[]>('@metrics.all')
    .then(xhrs => {
      const results = Array.from(xhrs).filter(isVideoPlayInViewport);
      const hasVideoPlayInViewport = results.length !== 0;
      const timeExceededLimit = (Date.now() - startTime) > 10000;
      needToWait = !hasVideoPlayInViewport && !timeExceededLimit;
    }); 
} while (needToWait);

我也想过苦等，但是赛普拉斯指南字面上说waiting for an arbitrary amount of time is an anti-pattern。

cy.wait(7000); // this is pretty much the same thing as the above I guess lol, but the above can short circuit the loop once it's found, this doesn't

// verify metric is present

测试指标是否属于赛普拉斯的用例？作为 UI 测试的一部分，是否有更好的策略来验证指标？

我已经阅读了有关 wait function as well as best practices regarding unnecessary waiting 的文档，但我还是一片空白。

Answer 1

我找到了一个插件 (https://github.com/NoriSte/cypress-wait-until)，它完全符合我的要求 - 它允许我们等待 Cypress 不支持等待的任何其他内容，例如上面的网络请求示例。所以在设置插件之后，代码片段现在看起来像这样：

cy.waitUntil(() => cy
      // stubbed according to https://docs.cypress.io/guides/guides/network-requests.html#Stubbing
      .get<Cypress.WaitXHR[]>('@metrics.all')
      .then(xhrs => {
        const videoPlayInViewportRequests = Array
          .from(xhrs)
          .filter(isVideoPlayInViewport);

        // 0 is falsy and will trigger retry, else return XHR requests to be yielded
        return videoPlayInViewportRequests.length && videoPlayInViewportRequests;
      }))
      // also not sure why but this param type is incorrectly inferenced as `undefined`
      .then(videoPlayInViewportRequests => videoPlayInViewportRequests
        .forEach((xhr: Cypress.WaitXHR) => expect(getJSONPayload(xhr)).to.include('viewers')));

以后注意：我不得不将"experimentalFetchPolyfill": true转为polyfillfetch，它在项目中使用，所以一些的类型将来可能会过时。

我们如何在 Cypress 中等待网络请求？

How can we wait for a network request in Cypress?

user-interface

integration-testing

automated-tests

e2e-testing

cypress