CODEWITHSUNDEEP
cypress
Gabriel Costa Finkel
Gabriel Costa Finkel

Reputation: 175

Second drop down list does not get filled with Cypress

I ran into a problem. Can anyone help me ?

So, I have two drop down lists and the second is dependent on the option I choose on the first.

Say, for example: The first drop down list has the options 'numbers' and 'letters', while the second drop down list is empty by default. However, when I choose the option 'letters' on the first drop down list, the second is filled with the options 'A', 'B' and 'C'. Manually, it is working fine, but when I select the first drop down list with Cypress, the second doesnt get filled. It remains empty, so I cant choose anything on it.

HTML:

<select id="list" class="selectpicker form-control" onchange=""><option value="0">select your preferences</option><option value="2">numbers</option><option value="3">letters</option></select>

CYPRESS: cy.get('#list').select('letters')

it does select the option letters, I can see the option letters selected on the first drop down list, but nothing happens on the second.

Upvotes: 0

Views: 2024

Answers (3)

Chemaclass
Chemaclass

Reputation: 2011

I think you should "force" the refreshing data from the "non-updated" dropdown. Try to "click()" it.

Something like this:

cy.get('#list')
  .contains('letters')
  .then(option => { // Confirm have correct option 
    cy.wrap(option).contains('letters'); 
    option[0].click(); // After click, mdc-select should hold the text of the 
                      // selected option: cy.get('#list').contains('letters'); 
  });

Maybe this link can help you: select dropdownlist item using cypress

Upvotes: 1

Gabriel Costa Finkel
Gabriel Costa Finkel

Reputation: 175

The solution from what it seems is to force the click because, from what I could gather, cypress chooses the option but IT DOESNT CLICK THE OPTION! Is this a bug?

So, this is the giant that was necessery, in the end to make it work:

//choose the option on the first drop down
    cy.get('#list').select('letters')
    cy.get('#list').contains('letters').then(option => {
        cy.wrap(option).contains('letters');
        option[0].click();
        cy.get('#list').contains('letters');
      });

//choose the option on the second drop down
    cy.get('#list2').select('A')
    cy.get('#list2').contains('A').then(option => {
        cy.wrap(option).contains('A');
        option[0].click();
        cy.get('#list2').contains('A');
      });

//click on the button to save the options selected
    cy.get('.saveButton').click()

when, normally, it should be only:

    cy.get('#list').select('letters')
    cy.get('#list2').select('A')
    cy.get('.saveButton').click()

Do you guys think this is a bug ?

Upvotes: 1

Evgenii Bazhanov
Evgenii Bazhanov

Reputation: 926

alternatively you can select by value cypress docs

cy.get('#list').select('3')

Upvotes: 0

Related Questions