Cypress test always fails in GitHub Actions & headless, but not locally in normal mode?

I have a Cypress test that checks for the presence of a data-cy within another data-cy.

This test passes when I run Cypress locally in Chrome. It fails when I run it in headless mode locally. It fails regardless of what mode it is run under, when ran in GitHub Actions.

When it fails locally in headless mode, I can see the element rendered that it is apparently failing to find on the DOM, in the screenshots & video.

I’m baffled. I’ve tried changing Node versions on GitHub Actions, I’ve tried a separate Cypress test step rather than using the Vue CLI. I’ve even tried running it within a Windows container and forcing Chrome instead of Electron. I’ve even tried adding sleeps/timeouts.

Here is the test:

  it("When I choose 4-4-2, I see the expected combination of players", () => {
    cy.get("[data-cy=formation-selector-1]").select("4-4-2");
    cy.get("[data-cy=formation-1]").within(() => {
      cy.get("[data-cy=goalkeeper]")
        .its("length")
        .should("eq", 1);
    });
  });

The error message always says: CypressError: Timed out retrying: Expected to find element: '[data-cy=goalkeeper]', but never found it.

Just to provide some context, the reason why I am using the within() function is because on the page, I have several different formation divs. Hence the appended -1 to the data-cy=formation-1. Every one of these has a div with data-cy=goalkeeper inside it. So the reason why I am using within() is to avoid having to append a similar unique identifier to the data-cy of each child element.

Does anyone have any idea, what the culprit possibly could be? Or something I can do to get to the bottom of it? Thanks.