How can I select the option in the dropdown box?, while no options seen in html in cypress

Question

I notice there is no select options in my html code.

How can I select the option in the dropdown box?

This is my html:

<div class="row asset_config">
    <div class="loader-container">
        <div class="loader-content">
            <div class="required form-group"><label for="cc_7sgwxb2v9" class="">allocation</label>
                <div class="Select css-b62m3t-container"><span id="react-select-3-live-region" class="css-1f43avz-a11yText-A11yText"></span><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
                    <div class="Select__control css-1s2u09g-control">
                        <div class="Select__value-container css-319lph-ValueContainer">
                            <div class="Select__placeholder css-14el2xx-placeholder" id="react-select-3-placeholder">Select allocation</div>
                            <div class="Select__input-container css-6j8wv5-Input" data-value=""><input class="Select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="cc_7sgwxb2v9" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"></div>
                        </div>
                        <div class="Select__indicators css-1hb7zxy-IndicatorsContainer">
                            <div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span class="connect-icon connect-icon-caret-down"></span></div>
                        </div>
                    </div><input name="allocationType" type="hidden" value="">
                </div>
            </div>
        </div>
    </div>
</div>

I also notice that, cypress studio suggest I click the dropdown box:

cy.get(':nth-child(2) > form > .allocation_session > .asset_config > .loader-container > .loader-content > .required > .Select > .Select__control > .Select__value-container > .Select__input-container').click()

I this is unreadable and not reliable. Sometimes suggested codes that click on other dropdown do not work if I didn't run the example code above or other suggested code.

Is there any reason behind why suggested code is coupled with other suggested code?

Is there a better way to select the element?

Answer 1

The react-select has the same user-actions as an ordinary HTML select, but you cannot use cy.select() command on it.

The general pattern is

• open the dropdown menu by clicking on the "main" control

• find the option you want to select within the menu listbox that is injected into the DOM after the above click action

• click that option

• verify the text of the option is now showing in the placeholder

// open the dropdown menu
cy.contains('label', 'allocation')
  .next('.Select')    
  .click()                                     

// find the option
cy.contains('Balanced Plus')
  .click()                

// verify option is selected
cy.contains('label', 'allocation')
  .next('.Select')    
  .find('.Select__placeholder')
  .should('contain', 'Balanced Plus')