Impossible to select value cypress ionic ion-select

Question

I have an Ionic angular app with an ion-select and ion-select-options.

I am trying to write cypress test to click on ion-select-options, but it's impossible.

It seems that cypress "click" but popover remains visible.

HAs someone already had this problem ?

<ion-item id="Size_Field" *ngIf="selectedCategory?.wardrobe_additional_fields.size_id">
  <ion-select mode="md" interface="popover" formControlName="size" cancelText="Annuler"
    placeholder="{{'WARDROBE.PIECES.FORM.SIZE' | translate}}*">
    <ion-select-option id="size-{{size.id}}-button"
      *ngFor="let size of selectedCategory?.wardrobe_additional_fields.size_id.values" value="{{size.id}}">
      {{size.fr_display}}
    </ion-select-option>
  </ion-select>
</ion-item>



cy.get('[id="Size_Field"]').click();

cy.get('ion-select-popover > ion-radio-group > :nth-child(2)').click();

dropdown image

Answer 1

The options that the user sees on-screen are added to the DOM dynamically after the select is opened.

In my app the new section is <ion-alert>, and the simplest way to click an item in that section is to select it by it's text.

cy.get('[id="Size_Field"]').click();

cy.get('ion-alert').within(() => {                     
  cy.contains('button.select-interface-option', 'Taille unique').click()
})