'Cypress and ngx-scrollbar with auto-height

I am testing an application which uses ngx-scrollbar with auto-height (autoHeightDisabled: false). My tests clicks on something which is sometimes still invisible to the user, because a parent of the element, the ng-scrollbar element, is currently adjusting its height. But :visible matches and should('be.visible') is true. My workaround is a wait(100) before doing the click. But this is considered bad style. It looks like this:

    // eslint-disable-next-line cypress/no-unnecessary-waiting
    cy.get('#foo:visible').wait(100).click();

Any idea how to do this right?

To clarify: The test is able to click on the element without the wait. The problem is kind of a cosmetic one: The screenshots look bad. The test step in the Cypress GUI looks bad.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source