1

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

Fody
  • 23,754
  • 3
  • 20
  • 37
Ludovic
  • 194
  • 1
  • 8

1 Answers1

0

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()
})
Fody
  • 23,754
  • 3
  • 20
  • 37
  • Yeah, I also had similar issues, select/options can be tricky with Cypress. Worth trying Cypress recorder to see what it generates, sometimes, it's not relevant, but sometimes it's handy. https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab – Alain Boudard Jul 13 '22 at 08:27