3

How can I select the dropdown values using Cypress, it is build on angular page. By default the select field is displaying as below. First option click on the drop down but not value, I have tried eq(1), eq(2)..but not working yet.

enter image description here

I have tried the below options in cypress but these are not working;

Option : 1

cy.get('.mat-select-value > span').eq(0).then((option)=>{
  cy.wrap(option).eq(0).click();
})

Option 2:

cy.get('.mat-select-value > span').contains("Phase 4 - Boond ").click();

// Attached the html:

enter image description here

Mr. J.
  • 3,499
  • 1
  • 11
  • 25
soccerway
  • 10,371
  • 19
  • 67
  • 132
  • What part doesn't work? 1. Opening the dropdown? 2. Selecting the wished option? If it is the first one, you are clicking on the incorrect element. You need to click on the element that triggers the dropdown to open. – Mr. J. Aug 15 '19 at 07:56
  • First option is opening the drop down but not selecting the value – soccerway Aug 15 '19 at 08:15
  • @Mr.J. Option 1 open the drop drown selection box, but its doesn't select value. – soccerway Aug 15 '19 at 10:32

2 Answers2

3

you might want to try this:

cy.get('.mat-select-value > span').eq(0).click() // to open the drop down
cy.get('.mat-option').contains('Phase 4 - Boond').click() // to click the actual option
Mr. J.
  • 3,499
  • 1
  • 11
  • 25
  • Its says `mat-select-panel-wrap', but never found it.` – soccerway Aug 15 '19 at 10:53
  • hmm, well you can replace the first line with the line you were already using to open up the drop down. The second line is the thing that should fix your problem – Mr. J. Aug 15 '19 at 11:20
  • 1
    ` cy.get('.mat-select-value > span').eq(0).click().then((option) => { // After click, mat-select should contain the text of the selected option cy.get('.mat-option').contains('Phase 4 - Boond').click() });` – soccerway Aug 15 '19 at 11:31
  • No luck for me : Timed out retrying: Expected to find element: mat-option, but never found it. – Antonin Jan 11 '21 at 15:02
2

Sometimes the click() doesn't work as you would expect, in this case you can also try the trigger('click) for the option selection.

like:

cy.get('your-selector').trigger('click')

Mark Denes
  • 141
  • 1
  • 6