Question

嘿我想选择Intern over CSS Selector ID选择字段并选择一个选项。

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

我尝试这个命令，但对我没什么用处：

.findByCssSelector（'customer \ .profile \ .dateOfBirth_day＆gt;   选项：第n个孩子（3）'）

.findByCssSelector（'input [id =“customer.profile.dateOfBirth_day”]＆gt;   选项：第n个孩子（3）'）

示例代码：

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

任何人都可以帮我解决这个问题。感谢大家查看我的问题。

Answer 1

我找到了正确的命令：

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

感谢所有

Answer 2

您可以使用

选择单个选项

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

您也可以对其他标记属性执行相同操作，例如name title id等。

还有另一个线程，其中包含jquery选择的其他选项How do you select a particular option in a SELECT element in jQuery?

Answer 3

有一种不同的（更好的？）方法可以做到这一点。我的页面对象（https://theintern.github.io/intern/#page-objects）中的定位器是一个简单的findById()。使用它，我在我的测试中有以下命令序列，选择第三个选项（March），然后检查以确保它是我们期望的值。测试如下：

"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');
                    });
            }

有问题的选项的选项元素在列表的开头包含空白，因此选择3将返回＆＃39; March＆＃39;作为预期值。根据CSS选择器有时会变得混乱。这有点像用户会做的，点击元素然后选择一个选项。

选择Intern over CSS Selector ID选择字段并选择一个选项

3 个答案: