Dynamic alias for cy.intercept()

What would you like?

By #3083, I have to distinguish each graphql request because, cypress groups requests which has same endpoint very often. To handle independently each request, we can use operationName for alias like below.

cy.intercept('POST', '/graphql', req => {
  req.alias = req.body.operationName;
});

cy.wait('@someAlias');

However, if same request is sent multiple time with different variables, it is grouped again. Therefore, I cannot distinguish these queries. To do this, I thought random string will work as a suffix to operationName like below.

cy.intercept('POST', '/graphql', req => {
  const randomString = generateRandom();
  req.alias = `${req.body.operationName}${randomString}`;
});

From above, each request differentiated even if it is same request. But, how can I wait? how can I store that dynamic alias? I mean this ${req.operationName}${randomString} alias. When I store this alias to outer variable, I cannot use that variable with wait syntax.

Is there other way?

Below solution is not working

let alias = '';
cy.intercept('POST', '/graphql', req => {
  const randomString = generateRandom();
  alias = `${req.body.operationName}${randomString}`
  req.alias = alias;
});
cy.wait(`@${alias}`);

Why is this needed?

I have to wait all graphql requests when I load or visit specific page.

Thanks for your reading.

[bahmutov]

@baeharam the problem here is that by the time .then() => cy.wait(@{alias}) runs the alias variable is still undefined. We first need to make sure the alias is set. Here is how you could do that

it('creates random alias', () => {
  let alias = ''
  cy.intercept('GET', '/todos', (req) => {
    alias = 'get-todos-' + Cypress._.random(1e6)
    req.alias = alias
  })

  cy.visit('/?delay=2400')

  // first, wait for the alias string to become define
  cy.wrap('the alias string')
    .should(() => {
      expect(alias, 'alias string').to.not.be.empty
    })
    .then(() => {
      cy.wait(`@${alias}`)
    })
})

First, we retry using .should(() => ...) until the alias is set. Then we have the .then callback - by the time it executes, the alias has been set and all is good. Here is this test in action

https://user-images.githubusercontent.com/2212006/117389908-294d9600-aebb-11eb-97c7-2edf2e496b05.mp4

[bahmutov]

So at this point I would ask myself - do you know what to expect? Maybe you want to check if the number of requests is > 10 and write that as an assertion? Maybe use something like network idle by looking at the timestamp of the last intercept? I have such example at https://glebbahmutov.com/blog/cypress-tips-and-tricks/#wait-for-network-idle