单击带有量角器的复选框?

时间:2015-08-09 17:51:05

标签: javascript css angularjs protractor

HTML代码

<div class="check-box-panel">
<!--
 ngRepeat: employee in employees 
-->
<div class="ng-scope" ng-repeat="employee in employees">
    <div class="action-checkbox ng-binding">
        <input id="John" type="checkbox" ng-click="toggleSelection(employee.name)" 
                   ng-checked="selection.indexOf(employee.name) > -1" value="John"></input>

    <label for="John">
        ::before
    </label>
<!--
 John               
 end ngRepeat: employee in employees 
-->

<div class="ng-scope" ng-repeat="employee in employees">
<div class="action-checkbox ng-binding">
    <input id="Jessie" type="checkbox" ng-click="toggleSelection(employee.name)" 
               ng-checked="selection.indexOf(employee.name) > -1" value="Jessie"></input>

    <label for="Jessie"></label>

我尝试使用jQuery

element(by.repeater('employee in employees')).element(by.id('Jessie')).click();

,我尝试使用css

element(by.repeater('employee in employees')).$('[value="Jessie"]').click();

但它没有做好这项工作。我可以点击特定的复选框的任何其他方式吗?

3 个答案:

答案 0 :(得分:8)

好吧我有一个非常类似的问题,我无法点击复选框。事实证明我必须单击复选框标签。但是,如果要对选中复选框进行任何检查,则必须检查实际的复选框。我最终创建了两个变量,一个用于标签,另一个用于实际复选框。

JessieChkbxLabel = element(by.css("label[for='Jessie']"));
JohnChkbxLabel   = element(by.css("label[for='John']"));

//Click the Jessie checkbox
JessieChkbxLabel.click();

//Click the John checkbox
JohnChkbxLabel.click();

答案 1 :(得分:3)

你应该只需要使用元素(by.id('Jessie'))来抓住你的对象。您可能遇到的问题是click()返回一个promise,因此您需要使用.then来处理它。所以有些东西:

element(by.id('Jessie')).click().then(function(value) {
   // fulfillment
   }, function(reason) {
   // rejection
});

答案 2 :(得分:0)

除了直接检查id之外,您还可以filter检查员工姓名所需的元素:

var employee = element.all(by.repeater('employee in employees')).filter(function (elm) {
    return elm.evaluate("employee.name").then(function (name) {
        return name === "Jessie";
    });
}).first();
employee.element(by.css("input[type=checkbox]")).click();