Select value in p-dropdown from PrimeNG using Cypress

I try to select a value in my dropdown list using Cypress. I have tried several ways to do so, but none of them worked. It always select the value that is already selected.

In the Cypress documenation I found this:

cy.get('select').select('apples').should('have.value', '456')


When I apply this on my code ... :

cy.get('select').select('FR').should('have.value', 'FR')


... I get this error: CypressError: Timed out retrying: cy.select() failed because this element is not visible:

<select class="ng-tns-c16-2" aria-hidden="true" tabindex="-1" aria-label="Nederlands">...</select>


This element '' 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'

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

https://on.cypress.io/element-cannot-be-interacted-with

When I use force:true, the error is skipped, but it still doesn't work.

cy.get('select').select('FR',{force:true}).should('have.value', 'FR')


I also tried it without using select, but using click. This also just select the selected one, not the third selected.

cy.get('option').eq(2).click({force: true});


Using .type({downarrow}) also fails because it is not a text input field.

So I'm really out of ideas right now.

I want to test multiptle dropdowns, this is one of them:

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


EDIT:

I also tried the following, here I get the right value (France), but he cannot click on it.

cy.get('p-dropdown[formControlName="provenanceCountry"]').click();
cy.get('p-dropdown[formControlName="provenanceCountry"]').get('select').then(option => {
cy.wrap(option).get('p-dropdown[formControlName="provenanceCountry"]').contains('FRANCE').click();
});


Error:

CypressError: Timed out retrying: cy.click() failed because this element is not visible:
​

<option class="ng-tns-c9-15 ng-star-inserted" value="[object
Object]">FRANCE</option>

This element '<option.ng-tns-c9-15.ng-star-inserted>' is not visible because it has an effective width and height of: '0 x 0' pixels.

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

https://on.cypress.io/element-cannot-be-interacted-with
​

When I use {force: true} in my click, the error is just not shown.

EXACT HTML:

<div _ngcontent-c11="" class="eco-form-component"><label _ngcontent-c11="" class="eco-form-component__label" ng-reflect-ng-class="eco-form-component__label"> Geïmporteerd uit </label><span _ngcontent-c11="" class="eco-form-component__control"><p-dropdown _ngcontent-c11="" formcontrolname="provenanceCountry" class="ng-tns-c14-7 ui-inputwrapper-filled ng-untouched ng-pristine ng-invalid" ng-reflect-style="[object Object]" ng-reflect-options="[object Object],[object Object" ng-reflect-name="provenanceCountry"><div class="ng-tns-c14-7 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix" ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" style="width: 100%;"><!--bindings={
"ng-reflect-ng-if": "true"
}--><div class="ui-helper-hidden-accessible ng-tns-c14-7 ng-star-inserted"><select class="ng-tns-c14-7" aria-hidden="true" tabindex="-1" aria-label=" "><!--bindings={}--><!--bindings={}--><!--bindings={
"ng-reflect-ng-if": "true"
}--><!----><!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><option class="ng-tns-c14-7 ng-star-inserted" value=" "> </option><option class="ng-tns-c14-7 ng-star-inserted" value="BELGIUM">BELGIUM</option><option class="ng-tns-c14-7 ng-star-inserted" value="FRANCE">FRANCE</option><!----></select></div><div class="ui-helper-hidden-accessible"><input class="ng-tns-c14-7" readonly="" role="listbox" type="text" aria-label=" "></div><!--bindings={
"ng-reflect-ng-if": "true"
}--><label class="ng-tns-c14-7 ui-dropdown-label ui-inputtext ui-corner-all ng-star-inserted" ng-reflect-ng-class="[object Object]"><!--bindings={
"ng-reflect-ng-if": "true"
}--><!----> <!--bindings={
"ng-reflect-ng-template-outlet-context": "[object Object]"
}--></label><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={}--><!--bindings={}--><div class="ui-dropdown-trigger ui-state-default ui-corner-right"><span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down" ng-reflect-klass="ui-dropdown-trigger-icon ui-cl" ng-reflect-ng-class="pi pi-caret-down"></span></div><!--bindings={}--></div></p-dropdown></span><!--bindings={
"ng-reflect-ng-if": "false"
}--></div>

Continue reading...