BUG : not the same result between interface (open) and inline (run)

[LemassonLouis]

Hi, i'm using Cypress 13.13.2 with chtome 128 and node 14.21.3

Config

• Cypress 13.13.2
• Chrome (128)
• Node 14.21.3

I have an issue when i process a test when I use the inline mode (npx cypress run) that I doesn't have when I use the Cypress interface (npx cypress open) :

The error I get :

CypressError: Timed out retrying after 10050ms: `cy.click()` failed because this element:

`<multiselect _ngcontent-eml-c496="" data-e2e="multiselector_formHosts_hosts" _nghost-eml-c224="" ng-reflect-field-config="[object Object]" ng-reflect-options="[object Object],[object Object">...</multiselect>`

is being covered by another element:

`<div class="p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker" style="z-index: 1003;"></div>`

Fix this problem, or use {force: true} to disable error checking.

https://on.cypress.io/element-cannot-be-interacted-with
      at ensureIsDescendent (http://localhost:3000/__cypress/runner/cypress_runner.js:112854:68)
      at ensureDescendents (http://localhost:3000/__cypress/runner/cypress_runner.js:112905:5)
      at ensureDescendentsAndScroll (http://localhost:3000/__cypress/runner/cypress_runner.js:112911:14)
      at ensureElIsNotCovered (http://localhost:3000/__cypress/runner/cypress_runner.js:113042:5)
      at runAllChecks (http://localhost:3000/__cypress/runner/cypress_runner.js:113241:52)
      at retryActionability (http://localhost:3000/__cypress/runner/cypress_runner.js:113278:16)
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:1807:23)
      at Promise.attempt.Promise.try (http://localhost:3000/__cypress/runner/cypress_runner.js:4315:29)
      at whenStable (http://localhost:3000/__cypress/runner/cypress_runner.js:144055:68)
      at <unknown> (http://localhost:3000/__cypress/runner/cypress_runner.js:143996:14)
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:1807:23)
      at Promise._settlePromiseFromHandler (http://localhost:3000/__cypress/runner/cypress_runner.js:1519:31)
      at Promise._settlePromise (http://localhost:3000/__cypress/runner/cypress_runner.js:1576:18)
      at Promise._settlePromise0 (http://localhost:3000/__cypress/runner/cypress_runner.js:1621:10)
      at Promise._settlePromises (http://localhost:3000/__cypress/runner/cypress_runner.js:1701:18)
      at Promise._fulfill (http://localhost:3000/__cypress/runner/cypress_runner.js:1645:18)
      at <unknown> (http://localhost:3000/__cypress/runner/cypress_runner.js:5450:46)
  From Your Spec Code:
      at Context.eval (webpack://wui_e2e/./support/commands/multiselector.ts:22:33)

Screenshot recorded from the test :

Screenshot taken from the interface (do not fail) :

But, if I add the option force like it's recommanded in the error message, I get a new error like he doesn't found an element (on the next steps, on the screenshots it looks like he doesn't click on my multiselector :

AssertionError: Timed out retrying after 10000ms: Expected to find element: `[data-e2e='multiselector_formHosts_hosts'] p-multiselectitem:has([data-e2e='option_genericMultiselect_TRAVELPORT']`, but never found it.
      at eval (webpack://wui_e2e/./support/commands/multiselector.ts:28:15)
      at Context.eval (webpack://wui_e2e/./support/commands/multiselector.ts:25:15)

The command "multiselect" is a custom command that I add for personnal needs, take a look of the code :

const noLog = { log: false };


Cypress.Commands.add("multiselect", { prevSubject: true }, (subject: Cypress.JQueryWithSelector<HTMLElement>, values: Array<string>, options: Partial<Cypress.Loggable> = {}) => {
    if(options.log !== false) {
        options.log = false;

        var log: Cypress.Log = Cypress.log({
            $el: subject,
            name: 'multiselect',
            message: values,
            autoEnd: false,
        });

        log.snapshot("before");
    }

    const multiselector: string = subject.selector;
    cy.get(multiselector, noLog).click(noLog);

    cy.then(() => {
        values.forEach(value => {
            const option: string = `${multiselector} p-multiselectitem:has([data-e2e='option_genericMultiselect_${value}']`;

            cy.get(option, noLog)
                .attribute('ng-reflect-selected', noLog)
                .then(attr => {
                    const selected: boolean = attr === "true";

                    if(!selected) {
                        cy.get(option, noLog)
                            .click(noLog)
                            .then(() => {
                                log?.snapshot(value);
                            });
                    }
                });
        });
    });

    cy.blurByClickBody(noLog)
        .then(() => {
            log?.snapshot("after").end();
        });
});

Beacause the field look like this :

Please help !

Thanks by advance

[LemassonLouis]

Move to issue : #30181