support multiple cy.route methods at once

[dwelle]

Current behavior:

currently, we need to specify routes separately:

cy.route("POST", "/folder").as("postFolder");
cy.route("PATCH", "/folder").as("patchFolder");
...

Desired behavior:

specify several methods at once for easier management

cy.route([ "POST", "PATCH", "DELETE" ], "/folder").as("folderModification");

// so that later we can do

cy.get( selector ).click(); // POST
cy.wait("@folderModification");
cy.get( selector ).click(); // PATCH
cy.wait("@folderModification");
cy.get( selector ).click(); // DELETE
cy.wait("@folderModification");

[c32hedge]

In the current state, with having to specify routes separately, is it possible to have a subsequent cy.wait that waits for ANY of the requests, versus ALL?

[dwelle]

AFAIK, you can bind the same alias to different routes, and await them all by the same alias. Thus, you can make a simple helper:

cy.routeMany = (routesOptions, alias) => {
    routesOptions.forEach( routeOptions => {
        cy.route(routeOptions).as(alias);
    });
}

example usage:

cy.routeMany([
    '/a',
    '/b',
    { url: '/a', method: 'PATCH' }
], /* alias */ 'groupA' );

// make requests to test the behavior
cy.window().then(win => {
    function makeRequest (method, url) {
        let xhr = new win.XMLHttpRequest();
        xhr.open(method, url);
        xhr.send();
    }
    makeRequest('GET', '/a');
    makeRequest('GET', '/b');
    makeRequest('PATCH', '/a');
});

cy.wait('@groupA'); // 'GET /a'
cy.wait('@groupA'); // 'GET /b'
cy.wait('@groupA'); // 'PATCH /a'

[jennifer-shehane]

This is now possible using cy.route2(). Closed in #4176. cy.route2() matches on any method by default (* instead of GET).

This is currently experimental and requires being enabled by passing "experimentalNetworkStubbing": true through your Cypress configuration. This will eventually be merged in as part of our standard API.

Please see the cy.route2() docs for full details: https://on.cypress.io/route2

So you can do:

it('test', () => {
  cy.route2("/folder").as("folderMod");

  // so that later we can do
  cy.get(selector).click(); // POST
  cy.wait("@folderMod");
  cy.get(selector).click(); // PATCH
  cy.wait("@folderMod");
  cy.get(selector).click(); // DELETE
  cy.wait("@folderMod");
})

Full working example

it('test cy.route()', () => {
  cy.route2('/folder').as('folderMod')
  cy.visit('https://example.com')

  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('POST', '/folder', {})
    xhr.send()
  })
  cy.wait('@folderMod')

  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('PATCH', '/folder', {})
    xhr.send()
  })
  cy.wait('@folderMod')

  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('DELETE', '/folder')
    xhr.send()
  })
  cy.wait('@folderMod')
})

If you encounter any issues or unexpected behavior while using cy.route2() we encourage you to open a new issue so that we can work out all the issues before public release. Thanks!