We are using Cypress E2E testing framework on an Ionic 5 / Angular 9 project. Our tests mostly work as expected when running in the Cypress Test Runner GUI. However, when running in CLI-mode we get a lot of flakiness (i.e. not always, but certainly multiple times across our test suite per run) failures like this one:
Timed out retrying: expected '<span.ng-value-label>' to be 'visible' This element
<span.ng-value-label>is not visible because it has CSS property:position: fixedand it's being covered by another element:<div class="ng-input">...</div>
These failures originate in our attempts to interact with ng-select elements, which expand into markup and CSS that we have little-to-no control over. We use CLI mode for our continuous integration efforts, so these failures relating to ng-select are severely limiting the value we are able extract from our Cypress tests and our ability trust the test results.
An example of our Cypress code that engages with ng-select is as follows:
cy.get(`[data-cy=show-percents]`)
.should('be.visible')
.click();
cy.get('ng-dropdown-panel')
.should('be.visible')
.contains('span', 'Count of responses')
.should('be.visible')
.click({ force: true });
... and the markup that goes with that snippet would look something like this:
<ng-select
[(ngModel)]="inputFig.showPercents"
[appendTo]="'body'"
[searchable]="false"
[items]="valuesMenu"
[clearable]="false"
bindLabel="title"
bindValue="val" data-cy="show-percents">
</ng-select>
... and for completeness the bound typescript for this example contains:
valuesMenu = [
{
title: 'Count of responses',
val: false
},
{
title: 'Percentage of total',
val: true
}
];
What is a solution to being able to interact with ng-select consistently and reliably using Cypress tests?
