CODEWITHSUNDEEP
javascriptjquerynightwatch.js
Brown A
Brown A

Reputation: 979

Nightwatch to select option from select box

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?

Upvotes: 20

Views: 27707

Answers (5)

Dylan
Dylan

Reputation: 491

.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.

Upvotes: 5

Ray
Ray

Reputation: 1676

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')

Upvotes: 9

IceManSpy
IceManSpy

Reputation: 1098

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

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

Upvotes: 5

79E09796
79E09796

Reputation: 2230

The following syntax seems to be more reliable:

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

Upvotes: 16

Cees Timmerman
Cees Timmerman

Reputation: 19664

According to this post, this works:

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

Upvotes: 30

Related Questions