cy.within is failing in CI

[caseyjhol]

I'm using Cypress v7.7 on Ubuntu 20.04. I'm using the following to target a specific product card and the elements within it:

cy.getBySel("listing-container-loaded").should("exist");
cy.getBySelLike("product-card").should("have.length", 24);

cy.getBySel(`product-card LS T-SHIRT`).within(() => {
    cy.getBySel("palette-color")
        .filter('[aria-selected="true"]')
        .should("have.attr", "aria-label", "Black");
});

This works fine locally (both in headed and headless modes, and with multiple browsers). In Gitlab CI, though it's consistently failing with a nondescript error:

- within function(){}

Here are the results locally:

My getBySel and getBySelLike commands are as follows:

Cypress.Commands.add("getBySel", (selector, ...args) => {
    return cy.get(`[data-test="${selector}"]`, ...args);
});

Cypress.Commands.add("getBySelLike", (selector, ...args) => {
    return cy.get(`[data-test*="${selector}"]`, ...args);
});

I've tried increasing the memory in CI and I've also tried running Cypress in --headed mode.

Has anybody else encountered this error before, or have any suggestions for things to try?

Stack Overflow discussion: https://stackoverflow.com/questions/68413277/cypress-within-is-failing-in-ci

[caseyjhol]

After enabling junit reporting in cypress.json, I discovered that there is a TypeError being thrown that's not visible in the screenshots. There's an issue with the data in CI that isn't reproducible locally.

{
    // ...
    "reporter": "junit",
    "reporterOptions": {
        "mochaFile": "cypress-report-[hash].xml"
    }
}

TypeError: Cannot read property 'Black' of undefined
    at Context.eval (http://localhost:8080/__cypress/tests?p=cypress/integration/selection.spec.js:234:82)