Individual requests aliases not working

[jahvi]

Current behavior

When passing a callback function as the third parameter of cy.intercept() to dynamically alias individual requests they do not get aliased at all and cypress is unable to wait for them to complete.

Desired behavior

Individual requests should be able to be aliased so cypress can wait for them to complete.

Test code to reproduce

cy.visit('https://reactjs.org/');

cy.intercept('GET', '**/*', (req) => {
  req.alias = 'sampleRequest';
});

cy.wait('@sampleRequest');

Cypress Version

11.0.1

Node version

16.14.2

Operating System

macOS 10.15.7

Debug Logs

No response

Other

Cypress is able to see that the request got intercepted but on the task runner it shows requests as "No alias".

If I manually set the alias with .as('sampleRequest') it does work correctly.

[ryanthemanuel]

Hi @jahvi thanks for creating this issue. Using your code I definitely see that the request is marked with "no alias":

However, the test code does succeed in waiting on the aliased request. Have you tried moving the intercept code to before the visit call? I'm wondering if it's a timing issue with the intercept alias not being created until after the request(s) have already been made. Regardless, I think there's a problem with the request not being marked as an alias properly in the UI, but I just want to determine the extent of the problem.

[jahvi]

@ryanthemanuel Yes in my original code the request is inside a beforeEach but it doesn't wait as far as my testing goes.

[ryanthemanuel]

Thanks @jahvi. Just to clarify, in your code where it is not waiting properly, is the intercept being set up first thing before the visits/calls that might trigger the calls being handled by the intercept?

[jahvi]

That's correct, my code looks more like this. I just simplified it for the sake of raising this issue:

describe('App', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000');

    cy.intercept('POST', '**/*', (req) => {
		if (req.body.params > 1) {
	        req.alias = 'getTransferEvents';
        } else {
			req.alias = 'getAllEvents';
        }
    });
  });

  it('should filter events by sender and recipient', () => {
    cy.wait('@getTransferEvents');

    // not waiting for the above 
  });
});

export {};

``

[ryanthemanuel]

Hi @jahvi can you try switching it to:

describe('App', () => {
  beforeEach(() => {
    cy.intercept('POST', '**/*', (req) => {
	if (req.body.params > 1) {
	        req.alias = 'getTransferEvents';
        } else {
		req.alias = 'getAllEvents';
        }
    });

    cy.visit('http://localhost:3000');
  });

  it('should filter events by sender and recipient', () => {
    cy.wait('@getTransferEvents');

    // not waiting for the above 
  });
});

export {};

[jahvi]

@ryanthemanuel Weirdly that does seems to work. The requests still show as "no alias" but looks like a good workaround for now thanks!

[ryanthemanuel]

Glad to hear you have a workaround. It's definitely good practice to put the intercepts first before any actions that might trigger anything you're trying to intercept (like a cy.visit).

That being said, there still is an issue with requests that are marked with alias in intercepts not showing up as aliases in the UI. I can recreate this with the following code:

    it('aliases an intercept', () => {
      cy.intercept('GET', '**/comments/*', (req) => {
        req.alias = 'getComment'
      })

      cy.visit('https://example.cypress.io/commands/waiting')

      cy.get('.network-btn').click()

      cy.wait('@getComment')
    })

I will go ahead and route this to the e2e team for further investigation and fixing.

[NassrEML]

Hi everyone, I'm facing the same problem and from what I've seen it seems that the req object lacks the alias field even after hardcoding it

[tarrball]

Instead of using req.alias = '...', as in:

it('aliases an intercept', () => {
  cy.intercept('GET', '**/comments/*', (req) => {
    req.alias = 'getComment'
  });

  cy.visit('https://example.cypress.io/commands/waiting');

  cy.get('.network-btn').click();
  
  cy.wait('@getComment');
});

...adding an alias with as seems to work alright, as in:

it('aliases an intercept', () => {
  cy.intercept('GET', '**/comments/*', (req) => {
    // perform checks on req
  }).as('getComment');

  cy.visit('https://example.cypress.io/commands/waiting');

  cy.get('.network-btn').click();
  
  cy.wait('@getComment');
});

[felipeptcho]

@tarrball Yeah, but I think the problem is that we want to conditionally add an alias.

[tarrball]

@felipeptcho makes sense. I was trying to conditionally set it, but couldn't get it to work (and then found this thread). Using as() and a little rearranging of the test made the conditional alias unnecessary (for my needs).

[Undistraction]

This is still a problem. The aliasing works correctly and allows responses to be stubbed and requests to be waited on, however 'no alias' is displayed for all instances where the alias is set on the request (using request.alias = "example") inside cy.intercept`.

This is true even when intercepts are defined well before any cy.visit.

[saiudayakella]

@jennifer-shehane @lmiller1990 @flotwig - This bug may not be high priority in terms of functionality but the alias details not showing up in command log is creating lot of confusion, especially to track if the intercept is matched (or) not

Our app uses Mqtt and requests polled as a backup for every seconds.. With this issue, it is not easy to check if an appropriate fixture is sent for an intercepted request (or) not. We have to click the no alias and view the details in dev tools to confirm

Is there a timeline to fix this issue? It not, it would be great if this can be looked at in near future

[lmiller1990]

I don't think anyone is actively fixing this issue right now. Would you be interested in trying to fix it? I could review your code or potentially point you in the right direction.

If I had to guess, I think Cypress is queue up the code like this:

cy.intercept('GET', '**/comments/*')
cy.visit(...)

And the alias is not set until after the actual request is intercepted - the actual UI is updated before this, when alias is undefined. In this case, I can't imagine how you could fix this.

Here are some similar issues that offer alternatives / work arounds:

• Dynamic alias for cy.intercept() #16321
• Show dynamic request aliases in the command log #17819

[tomturton]

I am having the same issue. I need to intercept GraphQL requests, and dynamically assign the alias based on the operation in the request. Unfortunately req.alias = 'abc'; seems to have no effect. The intercept occurs and is listed as no alias, and the cy.wait('@abc'); never resolves. I have checked that the req.alias assignment runs.

The intercept is being setup before the cy.visit('...'); command, so there should be no race condition.

This bug means I am unable to use Cypress to test anything that calls a GraphQL API more than once 😞.

[arto80]

I have the same issue. Version with "as" also not working besasue if the url is the same then even if we have multiple alises we get them pointed to the same request

[felipeptcho]

@tomturton As we discussed above, req.alias should work as expected. The only problem is that Cypress doesn't display the correct alias in its user interface. When calling cy.wait() with the alias you've set, it should work normally. Make sure you are really calling cy.intercept() before executing the action that will trigger the request (e.g. cy.visit()). See the same problem here: #24653 (comment)

@arto80 Yeah, using .as() will not help with multiple requests. The solution is to use req.alias, but as you probably know, it won't show up in the Cypress UI.

This plugin might help you: https://github.com/Shopify/cypress-graphql

[S-Tornqvist]

A solution is proposed in #28326, however I find the behavior of the "no alias" label hard to test. Any ideas?

[S-Tornqvist]

A solution is proposed in #28326, however I find the behavior of the "no alias" label hard to test. Any ideas?

Solved in same pr #28326

[cypress-bot]

Released in 13.6.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.6.0, please open a new issue.