Select with Intern over CSS Selector ID a select field and choose one option

Question

Hey i want to select with Intern over CSS Selector ID a select field and choose one option.

<div class="controls">
<select id="customer.profile.dateOfBirth_day" 
class="form-controlmb"name="customer.profile.dateOfBirth_day">

<option selected="selected" value=""></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>

I try this commands but nothing works for me:

.findByCssSelector('customer\.profile\.dateOfBirth_day > option:nth-child(3)')

.findByCssSelector('input[id="customer.profile.dateOfBirth_day"] > option:nth-child(3)')

Example Code:

.findByCssSelector('customer.profile.dateOfBirth_day > option:nth-child(3)')
          .click()
          .end()

Could anyone possibly help me with that problem. Thank you everybody for looking in my problem.

@Vohuman findByCssSelector is a function of the Leadfoot Framework that i use with intern(https://theintern.github.io/leadfoot/Command.html#findByCssSelector) — Stefan Kloß, Aug 03 '15 at 13:48

score 3 · Answer 1 · edited Aug 04 '15 at 08:29

3

I found the right command:

.findByCssSelector('select#customer\\.profile\\.dateOfBirth_day > option:nth-child(3)')

Thank to all

edited Aug 04 '15 at 08:29

ketan

19,129
42
60
98

answered Aug 03 '15 at 14:27

Stefan Kloß

63
7

score 2 · Answer 2 · edited May 23 '17 at 10:28

2

You could select individual options using

.findByCssSelector('option[value="foo"]')

You can also do the same with other tag attributes such as name title id etc.

Also heres another thread with some other options for jquery selections How do you select a particular option in a SELECT element in jQuery?

edited May 23 '17 at 10:28

Community

1
1

answered Dec 03 '15 at 23:12

kgstew

472
4
12

score 0 · Answer 3 · answered Nov 16 '15 at 23:00

There is a different (better?) way to do this. The locator in my page object (https://theintern.github.io/intern/#page-objects) is a simple findById(). Using that, I have the following sequence of commands in my test that select the 3rd option (March) and then check to make sure that that is the value we expect it to be. The test is as follows:

"Posting Period month can be selected": function () {
                return FormFields.PostingPeriod.Month()
                    .click()
                    .findAllByTagName('option')
                    .then(function (results) {
                        return results[3].click();
                    })
                    .end()
                    .then(function () {
                        return FormFields.PostingPeriod.Month();
                    })
                    .getProperty('value')
                    .then(function (result) {
                        expect(result).to.equal('March');
                    });
            }

The option elements for the select in question contain a blank one at the beginning of the list, so selecting 3 returns 'March' as the expected value. Depending upon CSS selectors can sometimes get messy. This is a little more like a user would do, clicking on the element and then choosing an option.

Select with Intern over CSS Selector ID a select field and choose one option

3 Answers3