通过 CSS 选择器 ID 选择 Intern 选择字段并选择一个选项答案

【问题标题】：Select with Intern over CSS Selector ID a select field and choose one option通过 CSS 选择器 ID 选择 Intern 选择字段并选择一个选项
【发布时间】：2015-08-03 13:35:05
【问题描述】：

嘿，我想用 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('客户\.profile\.dateOfBirth_day > 选项：nth-child(3)')

.findByCssSelector('input[id="customer.profile.dateOfBirth_day"] > 选项：nth-child(3)')

示例代码：

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

谁能帮我解决这个问题。谢谢大家关注我的问题。

【问题讨论】：

什么是findByCssSelector？
不能像这样选择使用选项值而不是那个
@Vohuman findByCssSelector 是我与实习生一起使用的 Leadfoot 框架的一个功能(theintern.github.io/leadfoot/Command.html#findByCssSelector)

标签： jquery html css automation intern

【解决方案1】：

我找到了正确的命令：

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

谢谢大家

【讨论】：

【解决方案2】：

您可以使用

选择单个选项

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

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

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

【讨论】：

【解决方案3】：

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

"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 会返回“三月”作为预期值。根据 CSS 选择器有时会变得混乱。这有点像用户会做的，点击元素然后选择一个选项。

【讨论】：