How to fetch the locator for the dynamic generated dropdown value?

Question

I am writing the cypress test. I can see the developer has used the below script to select the dropdown list. They didnt use the select option for drop down. They used the div for dropdown. So that you dont see the options are not getting displayed in the script

div class=" css-yk16xz-control">
    <div class=" css-g1d714-ValueContainer">
        <input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>

I have tried this cy.get(".css-g1d714-ValueContainer").click() in my test and it's getting clicked and it displays the dropdown. Now I have to select anyone value from the drop down. I dont see any options are displaying there when I do inspect in my browser.

By manualy I can select any one value and I click it and then I can see selected value is getting displayed in inspect browser.

<div class=" css-yk16xz-control">
    <div class=" css-g1d714-ValueContainer">
        <div class=" css-1uccc91-singleValue">Start</div>
        <input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>

I dont see the 'start' in the beginning itself. So I tried these two code in cypress

Firstone

cy.get(".css-g1d714-ValueContainer").click()
cy.get(" css-1uccc91-singleValue").invoke("Start")

This also didnt work

Secondone

cy.get(".css-g1d714-ValueContainer").next(" css-1uccc91-singleValue","Start")

This also didnt work.

I wanted to know how to write the locator for selecting the dropdown value?

Is the text 'Start' appearing on the drop down and you want to select that ? — Alapan Das
Yes I have three values in the dropdown Start,End,Middle. I wanted to select start as part of my test. — vaanumalar

Alapan Das Alapan Das · Accepted Answer · 2021-06-28T10:05:11

You can directly use .contains() once the dropdown is in the opened state to select the option. Add {matchCase: false} to disable the check for case sensitivity.

cy.get('.css-g1d714-ValueContainer').trigger("mousedown")
cy.get('.css-g1d714-ValueContainer').trigger("mouseup")
cy.contains('Start', { matchCase: false, timeout: 6000 }).click()

How to fetch the locator for the dynamic generated dropdown value?

1 Answers