Second drop down list does not get filled with Cypress

Question

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.

I think you should "force" the refreshing data from the "non-updated" dropdown. Try to "click()" it. Maybe this link can help you https://stackoverflow.com/questions/48362422/select-dropdownlist-item-using-cypress — Chemaclass, Apr 02 '20 at 09:25
When I try to use click() cypress returns an error : CypressError: cy.click() cannot be called on a — Gabriel Costa Finkel, Apr 02 '20 at 18:07
I followed the instructions on that other topic you mentioned and I NEVER THOUGHT IT WOULD WORK, BUT IT DOES!!!!! I had to include these lines of code at each of the two drop down lists: 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'); }); — Gabriel Costa Finkel, Apr 02 '20 at 18:37
You show `onChange=""` but there must be an event linking the two selects. Try `cy.get('#list').trigger('change')` after selecting. — , Apr 03 '20 at 10:05
@GabrielCostaFinkel I will write my answer then as a normal answer, so you can approve it will be the answer for everyone who's having this same problem. I will use your code example to make it simpler :) — Chemaclass, Apr 03 '20 at 15:27

score 1 · Answer 1 · answered Apr 02 '20 at 18:46

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 ?

I didn't see that you already commented the answer yourself. And I don't think it's a bug... this is the behavior I saw in other JS frameworks. — Chemaclass, Apr 03 '20 at 15:31

score 1 · Answer 2 · answered Apr 03 '20 at 15:29

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

score 0 · Answer 3 · answered Apr 01 '20 at 21:29

0

alternatively you can select by value cypress docs

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

answered Apr 01 '20 at 21:29

Evgenii Bazhanov

898
1
7
19

Yes, I tried that, but the results are the same. It wont fill the second drop down list. Any idea why ? – Gabriel Costa Finkel Apr 02 '20 at 15:18
3

now I want to know if the element on which you want to click is visible `cy.get('#list').select('3').should('be.visible')` and also interesting do you have any error message in cypress runner? or it is just was not selected? – Evgenii Bazhanov Apr 02 '20 at 17:11
No errors. Even the be.visible that you mentioned now goes green. Everything seems perfect , but the second drop down doesnt load anything. If I choose manually, it works perfectly, but if its cypress selecting the option 3, nothing gets loaded! By the way, if I go back on the previous steps using cypress sidebar, the first dropdown is always on "select your preferences", I cant see it on 'letters'. However, when the test runs, I can see cypress choosing the option 'letters'. – Gabriel Costa Finkel Apr 02 '20 at 18:04
@GabrielCostaFinkel Did you find solution to your problem? I am facing exact issue but no solution yet. – srinathbharadwaj Sep 30 '20 at 06:52

Second drop down list does not get filled with Cypress

3 Answers3