Clicking a checkbox with protractor?
Solution 1
Alright I had a very similar issue where I couldn't click the checkbox. It turned out I had to click the checkbox label. However if you want to do any checks on if the checkbox is selected then you have to check the actual checkbox. I ended up making two variables, one for the label and one for the actual checkbox.
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();
Solution 2
You should just need to use element(by.id('Jessie')) to grab your object. The issue you might be having is that click() returns a promise, so you need to handle that with a .then. So something along the lines of:
element(by.id('Jessie')).click().then(function(value) {
// fulfillment
}, function(reason) {
// rejection
});
Solution 3
Aside from checking the id
directly, you can also filter
the desired element checking the employee name:
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();
Combospirit
Updated on July 09, 2022Comments
-
Combospirit almost 2 years
HTML code
<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>
I tried using jQuery
element(by.repeater('employee in employees')).element(by.id('Jessie')).click();
also,I tried using css
element(by.repeater('employee in employees')).$('[value="Jessie"]').click();
But it didn't do the job. Any other way I can click on the particular Checkbox?