p-dropdown not visible for Cypress

UI Components for Angular
Post Reply
Remco
Posts: 1
Joined: 03 Jan 2019, 12:31

03 Jan 2019, 12:43

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..

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests