p-dropdown not visible for Cypress

[Remco]

Hi all,

I'm using Cypress as testing framework, it's working fine with Angular and PrimeNG.
But I have a problem when I want to select a value in a p-dropdown. Cypress always complains that the element is not visible. There has to be a parent with overflow: hidden or scroll or auto. I don't know what element causes this problem...

p-dropdown:

Code: Select all

<span class="eco-form-component__control">
            <p-dropdown formControlName="provenanceCountry"
                        [options]="sectors"
                        [style]="{'width':'100%'}">
            </p-dropdown>
</span>

Cypress code:

Code: Select all

   cy.get('p-dropdown[formControlName="provenanceCountry"]').click();
    cy.get('select[aria-hidden="true"]').eq(4).select('Nederland').should('have.value', 'Nederland')

Error:

CypressError: Timed out retrying: cy.select() failed because this element is not visible:
<select class="ng-tns-c9-14" aria-hidden="true" tabindex="-1" aria-label=" ">...</select>
This element '<select.ng-tns-c9-14>' is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: 'hidden', 'scroll' or 'auto'

What is the reason that cypress cannot select a value in my dropdown? I can get the values from my dropdown, but I cannot select them..