Cypress: cy.route2() doesn't work when method is used as the first parameter

Created on 2 Oct 2020 · 8Comments · Source: cypress-io/cypress

Current behavior

When passing POST as the first parameter to route2 requests are not properly intercepted.

// Does not work
cy.route2('POST', `${BasePage.api_url}/events/createTemplate`).as('create_template')
cy.wait('@create_template')

// Works
cy.route2(`${BasePage.api_url}/events/createTemplate`).as('create_template')
cy.wait('@create_template')

Desired behavior

Using the method parameter should work.

Test code to reproduce

https://github.com/bhgsbatista/cypress-test-tiny/tree/route2_method_fail

Versions

Cypress v5.3.0
Windows 10

internal-priority pknet-stubbing bug

Source

bhgsbatista

Most helpful comment

That is not at all reflected in the documentation, that same link you shared has this snippet of code:

cy.route2(url, routeHandler?)
cy.route2(method, url, routeHandler?)
cy.route2(routeMatcher, routeHandler?)

Below that there's an example using the method argument without altering the response:

cy.route2('POST', '/organization', (req) => {
  expect(req.body).to.include('Acme Company')
})

https://docs.cypress.io/api/commands/route2.html#Intercepting-a-request

There is definitely an issue here, either with the implementation, or with the documentation.

bhgsbatista on 2 Oct 2020

👍2

All 8 comments

If you want to set the method, without altering the response, you need to do it in following way:

cy.route2({ method: 'PUT', pathname: '**/api' }).as('api');

See https://docs.cypress.io/api/commands/route2.html#Usage

JonahKK on 2 Oct 2020

That is not at all reflected in the documentation, that same link you shared has this snippet of code:

cy.route2(url, routeHandler?)
cy.route2(method, url, routeHandler?)
cy.route2(routeMatcher, routeHandler?)

Below that there's an example using the method argument without altering the response:

cy.route2('POST', '/organization', (req) => {
  expect(req.body).to.include('Acme Company')
})

https://docs.cypress.io/api/commands/route2.html#Intercepting-a-request

There is definitely an issue here, either with the implementation, or with the documentation.

bhgsbatista on 2 Oct 2020

👍2

It looks like the route for the one with POST method is reading the POST as the url argument. I would agree that this is a bug (assuming the documentation is correct).

Looking at the code, it looks like it is always expecting a 3rd argument - the routeMatcher - and won't work without that. Although this contradicts the documentation which says the 3rd arg is optional.

https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/net-stubbing/add-command.ts#L249:L249

Screen Shot 2020-10-07 at 1 29 03 PM copy

it('works', () => {
  cy.route2('http://dummy.restapiexample.com/api/v1/create').as('create')

  cy.window().then((win) => {
    win.eval(
      `fetch("http://dummy.restapiexample.com/api/v1/create", {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
      });`
    )
  })

  cy.wait('@create')
})

it('should work', () => {
  cy.route2('POST', 'http://dummy.restapiexample.com/api/v1/create').as('create')

  cy.window().then((win) => {
    win.eval(
      `fetch("http://dummy.restapiexample.com/api/v1/create", {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
      });`
    )
  })

  cy.wait('@create') // wait times out
})

Current Workaround

Pass a 3rd arg until this is fixed / clarified. Just passing an empty object will make it work.

cy.route2('POST', 'http://dummy.restapiexample.com/api/v1/create', {}).as('create')

jennifer-shehane on 7 Oct 2020

Problem

This is happening because there is an ambiguity in the definition of route2:

In the case above, the OP is using cy.route2(string, string).

But it can be 2 calls:

cy.route2(url: string, routeHandler: string)
cy.route2(method: string, url: string, routeHandler: undefined)

The OP tries to use the second definition, but Cypress interpreted it as the first.

Solution?

Currently, we're only checking if the first arg is string or not. This ambiguity can be solved by checking if the first arg is an HTTP request method or a WebDAV request method.

What do you think, @flotwig?

sainthkh on 12 Oct 2020

Currently, we're only checking if the first arg is string or not. This ambiguity can be solved by checking if the first arg is an HTTP request method or a WebDAV request method.

@sainthkh yeah, I think that would be a perfect fix, doing a case-insensitive check against known HTTP methods for the first string parameter. Do you want to pick this up?

flotwig on 13 Oct 2020

I do. I'll get it done today. Maybe you'll be reviewing the PR next morning 😄 .

sainthkh on 14 Oct 2020

🚀1

The code for this is done in cypress-io/cypress#8829, but has yet to be released.
We'll update this issue and reference the changelog when it's released.