在Cypress中等待Fetch请求。

在 Cypress 的 E2E 测试套件中，使用 Fetch API 发送请求并等待响应的配置已经记录在 cy.wait() 中。

有什么问题？

如果要等待在Cypress中的Web页面上进行的HTTP请求完成，然后执行下一个测试处理过程，可以使用cy.wait()。但是，默认情况下，只能等待由XMLHttpRequest发起的请求（仅适用于Cypress 5.x系列）。

然而，最近有很多网络应用程序不再使用XMLHttpRequest，而是采用Fetch API来处理请求。经常用于向GraphQL服务器发送请求的apollo-client也使用Fetch来进行查询和变更，但在Cypress的测试用例中，无法直接等待并检查来自GraphQL服务器的响应。

下面将会解释Cypress的v4.9.0 – 5.x版本和v6.0.0以后版本的相应处理方法。

Cypress 版本从 v4.9.0 到 v5.x系列

设定

{
    "experimentalFetchPolyfill": true
}

通过在cypress.json中启用experimentalFetchPolyfill，您可以捕获使用Fetch发送的请求。

使用方法（4.9.0版本至5.x版本）

context('Fetch Test', () => {
    cy.server();
    // GraphQL
    cy.route('POST', '/graphql').as('graphql');
    // …
    it('wait fetch', () => {
        cy.visit('/');
        // …
        cy.get('[data-cy=new-button]').click();
        // Wait Fetch Response
        cy.wait('@graphql');
        // …
    });
    // …
});

杉树版本6.x系列

在Cypress 6.0.0版中，experimentalFetchPolyfill被废弃，
并引入了一个名为cy.intercept() 的方法来替代cy.server()和cy.route()。

使用方法 (版本6.x)

context('Fetch Test', () => {
    // GraphQL
    cy.intercept('POST', '/graphql').as('graphql');
    // …
    it('wait fetch', () => {
        cy.visit('/');
        // …
        cy.get('[data-cy=new-button]').click();
        // Wait Fetch Response
        cy.wait('@graphql');
        // …
    });
    // …
});

cy.intercept() 是一个能够介入浏览器请求处理的高级功能方法，但基本上可以用cy.route()来替代它。另外，cy.server()也变得不再必要。

结束

在上述配置和代码中，成功从GraphQL的查询和变更响应返回后，我们现在可以继续进行后续的测试。