Cypress isn't properly grouping some commands in the command log

ryanthemanuel commented 9 months ago

Current behavior

I'm seeing an issue where commands that should be grouped together aren't being grouped together.

This seems to have broken (or become worse) in 13.6.0 with this commit: https://github.com/cypress-io/cypress/pull/27998

Debugging through the code it appears that we're trying to compare displayMessages that aren't quite matching: https://github.com/cypress-io/cypress/blob/develop/packages/reporter/src/commands/command-model.ts#L202-L206

Some are GET /test/1 and some are GET 200 /test/1. Basically some are including the response status and some are not. The only thing I can think of is that with the new version of chrome-remote-interface the timing of responses has changed.

Desired behavior

I would expect:

Test code to reproduce

The code that I'm using to recreate this is:

xhr.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>XHR</title>
</head>

<body>
    <div id="test"></div>
</body>
<script>
    setTimeout(function () {
        Promise.all([
            window.fetch('/test/1', {
                method: 'GET',
            }),
            window.fetch('/test/1', {
                method: 'GET',
            }),
            window.fetch('/test/1', {
                method: 'GET',
            }),
            window.fetch('/test/1', {
                method: 'GET',
            }),
            window.fetch('/test/1', {
                method: 'GET',
            }),
            window.fetch('/test/1', {
                method: 'GET',
            }),
            window.fetch('/test/1', {
                method: 'GET',
            }),
            window.fetch('/test-action/1', {
                method: 'POST',
                body: JSON.stringify({
                    username: 'developer',
                    password: 'secret',
                })
            }),
            window.fetch('/test/1', {
                method: 'GET',
            }),
        ]).then(() => {
            const item = document.createElement('div')
            item.id = 'inserted'
            item.innerText = 'before'
            document.querySelector('#test').prepend(item)
        })
    }, 500);
</script>

</html>

test.cy.js

describe('xhr', () => {
  it('should render as expected', () => {
    cy.intercept(
      {
        method: 'GET',
        url: '/test/*',
      },
      []
    ).as('get')
    cy.visit('/public/xhr.html')
    cy.get('#inserted').should('exist')
  })
})

Cypress Version

13.6.0 (or at least it has become more common in this version)

Node version

any

Operating System

any

Debug Logs

No response

Other

No response

cypress-app-bot commented 2 weeks ago

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

cypress-app-bot commented 23 hours ago

This issue has been closed due to inactivity.

cypress-io / cypress