Selecting From a Menu

[David Nixon]

Just started using nightwatch.js and it's working well, however

I am so far unable to get my test to select from a dropdown option menu and was wondering how this is done.

I have HTML lke:

    <select class="abc">

        <option value="One">One</option>

        <option value="Two">Two</option>

        <option value="Three">Three</option>

    </select>

My test looks like:

    browser

           .url(somepath)

           .waitForElementVisible('.abc', 5000)

           .click('.abc')

           .waitForElementVisible('option[value="Three"]', 5000)    // this succeeds in finding the option element

           .click('option[value="Three"]')                                      // this fails to select option Three

All help most appreciated.

[Andrei Rusu]

Hi there,

I would try to use .setValue on the select. Something like:
setValue('select', 'Three').

> --
> Nightwatch.js - http://nightwatchjs.org | @nightwatchjs -
> https://twitter.com/nightwatchjs
> ---
> You received this message because you are subscribed to the Google Groups
> "NightwatchJs" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to nightwatchjs...@googlegroups.com.
> To post to this group, send email to nightw...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/nightwatchjs/975c5410-1adf-402a-af8c-a20aa525a153%40googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[Andrei Rusu]

This might not work though because selenium actually sends a sequence of keystrokes to the element.

[David Nixon]

setValue on the select fails, however setValue('option[value="Three"]', 'Three') seems to work.

It appears that the value set 'Three' must match the option value you want to select - I tried setting the value to 'xyz' and it failed.

Thanks for the help!

[David Nixon]

One further addition - after the setValue('option[value="Three"]', 'Three') the Three option shows in the dropdown, but other UI changes that should happen

based on the change in value don't.

So to get the appropriate events fired I found adding another click on the select worked to fire those. So overall I have:

            .waitForElementVisible('.abc', 5000)

            .click('.abc')

            .waitForElementVisible('option[value="Three"]', 5000)

            .setValue('option[value="Three"]', "Three")

            .click('.abc')      // required to get e.g. onChange event fired

[Andrei Rusu]

Cool!

[Tommy Wiebell]

I've had success doing this all in one click event, like so:

.click(".abc option[value='One']")

[Hyung Jin Park]

You can use css selector as select element option to set value.

.click(".abc option:nth-child(2n)")

=> selected  to option value "Two"

2014년 2월 22일 토요일 오전 7시 1분 11초 UTC+9, David Nixon 님의 말:

[GreenAsJade]

On Tuesday, February 25, 2014 at 8:13:02 AM UTC+10:30, Tommy Wiebell wrote:

I've had success doing this all in one click event, like so:

.click(".abc option[value='One']")

How do you do this while referring to the form via a page object selector?

This doesn't work:

.click("@reason option[value='CEO Request']")

... nightwatch thinks that the whole string is the selector.

Thanks!

[Julia Carminati]

Has anyone figured out how to select an option that requires scrolling in the drop down box?

[octalmage]

I ended up writing a custom function to help with that. For example: 

  select: function(select, value) {

    return this.click(this.elements[select].selector + ' ' + 'option[value="' + value + '"]');

  }

[Damian Szymczuk]

If you want to do with Page Object, you have to use callback.

sectionInfo.click("@selectOwner",()=>{
  sectionInfo.click("option[value='owner']");
});

[Anwar Ali]

Thanks for posting this solution.

Is this documented somewhere?

[Ravishankar Haranath]

Thanks. This solution works!!

[Srinivas P - http://testingtools.co]

This looks fine if we know the value for the option you want to select, but in my situation i do not know the value of the option or it is difficult for the user to give that as an input \

So If I have to do something similar with display text of the option i was trying with something like

sectionInfo.click("@selectOwner",()=>{
  sectionInfo.click("option[text()='display text of the option']");
});

but unfortunately this is not working, any help on this is highly helpful and I would be thankful to you. 

On Thursday, May 4, 2017 at 12:59:28 AM UTC+5:30, Damian Szymczuk wrote:

[Sunil Samuels]

Hi Thanks for this post.

Does anyone know on how get a selected value from this dropdown.

I am trying .getValue(element) seems to return blank and .getText returns the whole set of options.

Thanks

Sunil