CODEWITHSUNDEEP
cypress
rino
rino

Reputation: 333

Select the filtered option from the dropdown using Cypress

I have a dropdown, kind of lookup, to test. I have to type a value and based on the value, the options will be filtered. And, I have to chose the option I want.

For example, some of the options filtered based on the value provided will be in the below format:

ENG 101 English-Read and Write
ENG 101 English-Speaking
ENG 101 English-Listening
MAT 201 Mathematics-Algebra
CSC 301 JAVA-Programming
CSC 301 CSharp-Programming

I can only type the values in the first column - 'ENG' or 'MAT' or 'CSC' in the field to filter the options.

Now, if I provide value 'MAT' in the field then only one option will be filtered. No issue with selecting the option 'Mathematics-Algebra'.

If I provide value as 'ENG' to filter then multiple options are filtered. Now, I have to select the option 'English-Listening'. This is where I have the problem.

cy.get('app-screen').find('#paper-description').type('ENG'); // this is for providing input 'ENG'
cy.get('.overlay-pane').find('mat-option span:nth-child(3)').should('have.text', 'English-Listening'); // this is for selecting the required filtered option.

When the above statement is executed, I am getting the below Assertion Error.

Timed out retrying after 4000ms: expected '[ <span.col-3>, 2 more... ]' to have text English-Listening, but the text was English-Read and WriteEnglish-SpeakingEnglish-Listenting

The html structure would be in the below format:

<div class='overlay-pane'>
    <mat-option>
        <span class='.col-1>ENG</span>
        <span class='.col-2>101</span>
        <span class='.col-3>English-Read and Write</span>
    </mat-option>
    <mat-option>
        <span class='.col-1>ENG</span>
        <span class='.col-2>101</span>
        <span class='.col-3>English-Speaking</span>
    </mat-option>
    <mat-option>
        <span class='.col-1>ENG</span>
        <span class='.col-2>101</span>
        <span class='.col-3>English-Listening</span>
    </mat-option>
</div>

The option to be selected this time may be 'English-Listening'. Next time, it could be 'English-Speaking' or some other option. How to select the required option out of multiple filtered items from lookup?

Upvotes: 0

Views: 717

Answers (3)

Leta Waldergrave
Leta Waldergrave

Reputation: 699

For material options, you should click the mat-option

cy.get('app-screen').find('#paper-description').type('ENG')
cy.contains('mat-option', 'English-Listening').click()

Upvotes: 2

Michael Hines
Michael Hines

Reputation: 1108

You can use find for this

cy.get('app-screen').find('#paper-description').type('ENG')

cy.get('.overlay-pane')
  .find('mat-option')
  .eq(2)
  .find('.col-3').should('have.text', 'English-Listening')
  .click()

Upvotes: 1

Alapan Das
Alapan Das

Reputation: 18626

You can use within for this:

cy.get('app-screen').find('#paper-description').type('ENG')

cy.get('.overlay-pane')
  .find('mat-option')
  .eq(2)
  .within(() => {
    cy.get('.col-3').should('have.text', 'English-Listening').click()
  })

You can also use contains if you don't know the exact position of the texts coming in the suggested list:

cy.get('app-screen').find('#paper-description').type('ENG')
cy.contains('span', 'English-Listening').should('be.visible').click()

Upvotes: 0

Related Questions