Nightwatch to select option from select box

Question

I am trying to use nightwatch.js to select an option from a select box.

I have the code:

    this.browser.click('select[name="month"]')
        .pause(1000)
        .click('option[value="3"]')
        .click('select[name="day"]')
        .pause(1000)
        .click('option[value="6"]')
        .click('select[name="year"]')
        .pause(1000)
        .click('option[value="1989"]');

It selects the correct month, year on the page but not the day. Here's the HTML for the select box for the day:

<select aria-label="Day" id="day" name="day" data-validatorGroup="bday" data-component="selectbox">
    <option selected="selected" value="" aria-label="Date of birth">
        Day</option>
    <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
         </select>

Does anyone know why its not selecting the proper day?

May you share all html code may be there is another select with the same name may be not sure; — itzmukeshy7, Mar 16 '16 at 08:10
My answer may help you http://stackoverflow.com/questions/37112583/cannot-locate-element-using-recursion-after-it-found-it-as-visible/37129429#37129429 — Bao Tran, May 24 '16 at 05:52

score 28 · Answer 1 · answered Jul 15 '16 at 13:12

28

According to this post, this works:

.click('#myselectbox option[value=somevalue]')

answered Jul 15 '16 at 13:12

Cees Timmerman

13,202
8
78
106

how would you do that outside of NW in vanilla js? – SuperUberDuper Apr 05 '17 at 15:37
thx, I'm getting the select change with the change event, but the event doesn't show what option is selected. I guess I need to query the select after? – SuperUberDuper Apr 06 '17 at 10:43
**document.querySelector("#myselectbox option[value=somevalue]").click()** doesn't change the value of the selected option in the UI. – SuperUberDuper Apr 06 '17 at 12:23
`s = document.querySelector('#myselectbox'); s.selectedIndex = s.querySelector('option[id=o2]').index; s.onchange()` – Cees Timmerman Apr 06 '17 at 12:41

score 15 · Answer 2 · answered Oct 31 '16 at 14:19

15

The following syntax seems to be more reliable:

.click('select[id="myselectbox"] option[value="somevalue"]')

answered Oct 31 '16 at 14:19

79E09796

1,833
1
17
32

1

Please give explanations for down votes, I'd like to learn more. Cees Timmerman's answer looks good but doesn't work for me. – 79E09796 Mar 27 '17 at 08:50
Well, my guess is that ```#myselectbox``` is more efficient version of ```select[id="myselectbox"]```. If it doesn't work you probably have more then one element with id ```#myselectbox``` on a page, which is considered to be a bad practice. – xpuu May 29 '18 at 17:11
This works with Chrome driver 85 and nightwatch 1.5.1. Thanks men!! – JRichardsz Oct 29 '20 at 23:16

score 8 · Answer 3 · answered Aug 11 '17 at 03:17

You may try the following, it works for me.

<option value="2">2</option>
...
.setValue('select[id="day"]','2')

if you have different value than the text in your option

e.g. <option value="123">abc</option>

You do .setValue ('select[id="yourselectid"]','abc')

score 5 · Answer 4 · answered May 03 '17 at 19:29

5

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

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

answered May 03 '17 at 19:29

IceManSpy

968
1
10
26

This is definitely the best way to do it, Thanks! – qacwnfq q Mar 28 '18 at 10:15

score 4 · Answer 5 · edited Nov 28 '18 at 18:09

4

.click("#selectid option:nth-child(1)")

This also works using class identifier -

e.g.

.click(".selectclass option:nth-child(1)")

Setting the nth-child to 1 will choose the first item in the dropdown.

Setting to 2 will select the second value, etc. etc.

Hope this helps for those of you who had no luck with previously stated solutions.

edited Nov 28 '18 at 18:09

Zymotik

3,378
1
28
41

answered Apr 19 '18 at 20:26

Dylan

469
7
19

Nightwatch to select option from select box

5 Answers5

Linked