0

Hi I am new in exploring cypress.

I notice that, there is no select options in my html code. How can I select the option in the dropdown box?

Let's take a look of 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>

In fact, I also notice that, cypress studio suggest me code to 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 found that not only unreadable is this approach, but also not reliable, because sometimes suggested codes that click on other dropdown doesnt work, if I didnt 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 I want to get?

edit:

picture included

enter image description here

Ae Leung
  • 300
  • 1
  • 12

1 Answers1

3

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')
Schiff
  • 165
  • 1
  • 7
  • Thanks , could you give a lttile explaination for cy.contains('label', 'allocation')? I am always confused with two arguement in contain() @Schiff – Ae Leung Dec 02 '22 at 08:58
  • and when we use .next('.Select') , does it mean giving me the last element that contain .Select, right. So I supposed it gives me [
    Select allocation
    ] already, why do we still need to use .find ? @Schiff     – Ae Leung Dec 02 '22 at 09:02
  • 1
    Two agrument .contains() in this situation is `cy.contains(selector, content)` with content being the text. – jjhelguero Dec 02 '22 at 15:57