how to select dropdown value of a react element

medv...@gmail.com

unread,

Nov 12, 2018, 3:44:57 AM11/12/18

to Geb User Mailing List

hello,

could you please help me to select the values of a react dropdown element?

dropdown

dropdown code

dropdown value code seen only if hovering over it

thank you,

Roland

Leo Silva

unread,

Nov 12, 2018, 3:55:58 AM11/12/18

to Geb User Mailing List

You can use interact to do hover over your element

I am doing something similar here:

https://github.com/leosilvadev/geb_browserstack_template/blob/master/src/test/groovy/com/github/leosilvadev/geb/modules/awful_valentine/HeaderMenu.groovy#L30

medv...@gmail.com

unread,

Nov 12, 2018, 9:02:25 AM11/12/18

to Geb User Mailing List

I tried the following, it does not give me an error, but does not select any option either:

interact {
    moveToElement $('div.Select.is-focused.is-open.is-searchable.Select--single > div.Select-control > div.Select-multi-value-wrapper > div.Select-input > input[role="combobox"]')
    click()
}

Could you please give me a hint?

Leo Silva

unread,

Nov 12, 2018, 9:16:39 AM11/12/18

to Geb User Mailing List

So, after the moveToElement, the click should receive the element you want to click on

you can do this even inside a waitFor, like

interact{
    moveToElement $('div.Select.is-focused.is-open.is-searchable.Select--single > div.Select-control > div.Select-multi-value-wrapper > div.Select-input > input[role="combobox"]')

    waitFor{ click($('.my-button')) }
}

If the select is built asynchronously, this would probably be necessary, if not you can just remove the waitFor and just have the click with the button element

medv...@gmail.com

unread,

Nov 12, 2018, 10:36:01 AM11/12/18

to Geb User Mailing List

My question is what should I click here?

If the dropdown is visible I see this

interact {
    moveToElement $('div.Select.is-focused.is-open.is-searchable.Select--single > div.Select-control > div.Select-multi-value-wrapper > div.Select-input > input[role="combobox"]')

    waitFor(25, 0.5){ click( $('div.Select.is-focused.is-open.is-searchable.Select--single > div.Select-control > div.Select-multi-value-wrapper > div.Select-input > input[role="combobox"]') ) }
}

does not click/select the dropdown element.

Leo Silva

unread,

Nov 12, 2018, 11:26:19 AM11/12/18

to Geb User Mailing List

Ah, sorry, now I got it

So, what exactly does the select works? Can you provide me with an example? From what I see in your example you have a div.Select-Input, but you have one for each option of your dropdown?

If yes, I would try to click on this div, or you could even try to moveToElement to the selection you want and then trigger the key ENTER, all this depends on how does your frontend works and how your html is being rendered

If you can, please create a dist with the generated html

medv...@gmail.com

unread,

Nov 15, 2018, 5:11:33 AM11/15/18

to Geb User Mailing List

I cannot create a gist as I cannot copy the hmtl code, it changes if I go somewhere else with the mouse, code seems to be dynamical. Can I copy the hmtl code somehow?

Dropdown closed state:

Dropdown opened state:

Hovering over value 0:

Hovering over value 1:

The moment the dropdown opens:

I do not see whch code part should be used for selecting the value.

Could you please help me?

Martin de laat

unread,

Dec 3, 2018, 8:52:52 AM12/3/18

to Geb User Mailing List

Can you inspect the dropdownpanel? (not the dropdown itself, the thing containing 'Herr' und 'Frau')

See if it's actually nested under your dropdown or at the <body> level for example.

What I ended up doing in a similar scenario is create seperate Geb modules for the dropdown itself, the dropdownpanel, and each item.

Dropdown contains a dropdownpanel.

Dropdownpanel contains a modulelist with items.

In our case, our dropdown panel is not nexted under the dropdown in the DOM as it didn't behave the way we wanted. It was put at the <body> level.

However, as far as testing functionality is concerned, we consider the dropdown panel to be part of the dropdown element, so we ended up with:

  static content = {
    dropdownPanel(wait: true) { parents('body').module(DropdownPanel) }
  }

This probably breaks some Geb best practice. But it ended up working nicely for us.

medv...@gmail.com

unread,

Dec 4, 2018, 5:39:54 AM12/4/18

to Geb User Mailing List

One our developers gave me following code part:

Bildschirmfoto 2018-11-30 um 08.17.28.png

So I figured out chrome shows some different code than react's dev tool.

With this css string finally I can select the dropdown value:

$('div.Select.is-open.is-searchable.Select--single > div.Select-menu-outer > div.Select-menu > div[role="option"][id*="--option-1"]').click()

Reply all

Reply to author

Forward