fix(ui): display duplicate aliases in command log

[flotwig]

• Partially addresses Cy intercept needs to provide more information in the command log #9588

User facing changelog

• Improved the way that cy.intercept() and cy.route() requests with multiple aliases are displayed in the command log.

Additional details

How has the user experience changed?

The aliases are now displayed in one line (ignore the lack of badge background, this is just a test):

But the list can still be expanded, in which case it's unjoined:

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub?
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?
• [na] Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

13760 • 0 • 164 • 5 • 0

---

Run details

Project	cypress
Status	Passed
Commit	0f8df43
Started	May 6, 2021 8:47 PM
Ended	May 6, 2021 9:00 PM
Duration	12:52 💡
OS	Linux Debian - 10.8
Browser	Multiple

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[jennifer-shehane]

Why don't the tests have the proper classes for the display?

Inside test

Outside test

I feel like this should reflect reality.

Anyway, I fixed the css so that:

• the weird circular alias shouldn't show anymore.
• there is a max width on the matched aliases because it was really gnarly if there were more than 5 matches or so.

Not sure how great of a solution this is for people reviewing videos of the run.

[flotwig]

Changes look great @jennifer-shehane. Finally, the weird cut-off-pill shape has been fixed!

[jennifer-shehane]

@flotwig So the percy screenshots looks a little off with my css changes, but...again, I'm not sure if this is accurate to real situations that would happen. I can try to recreate locally, but at least the dup one in the screenshots doesn't look like that usually. https://percy.io/cypress-io/cypress/builds/10298521

[jennifer-shehane]

I think the percy discrepencies are a zoom issue or something, because the css doesn't display the same as the snapshots when at 100%.

@flotwig Is this what's meant to be addressed in the other command log issue, but why are there duplicate logs for requests in this example 5 - 10 - 10?

It looks a lot clearer with the aliases displayed in this PR anyway.

it('test cy.intercept()', () => {
  cy.intercept('/u*').as('getUrl1')
  cy.intercept('/us*').as('getUrl2')
  cy.intercept('/use*').as('getUrl3')
  cy.intercept('/user*').as('getUrl4')
  cy.intercept('/users*').as('getUrl5')

  cy.visit('https://example.com')
  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('GET', '/users')
    xhr.send()
  })

  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('GET', '/users')
    xhr.send()
  })
  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('GET', '/users')
    xhr.send()
  })

  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('GET', '/users')
    xhr.send()
  })
  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('GET', '/users')
    xhr.send()
  })

  cy.wait('@getUrl1')
  cy.wait('@getUrl2')
  cy.wait('@getUrl3')
  cy.wait('@getUrl4')
  cy.wait('@getUrl5')
})

[flotwig]

Is this what's meant to be addressed in the other command log issue, but why are there duplicate logs for requests in this example 5 - 10 - 10?

@jennifer-shehane the browser is probably retrying the request, since presumably it's failing?

[bahmutov]

super

[cypress-bot]

Released in 7.3.0.

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