Calling "click()" on checkboxes fails in protractor

Question

in one of my test case, i have to perform a click on checkbox

i tried : -

var cb  = element(by.css('#port'+text));
cb.click() // failed

and

browser.actions().mouseMove(cb).click().perform();

is anybody face this kind of issue , is there any other workaround to do this

updated - tried with hard-coded values:

Template

   <input type="checkbox" style="min-width:50px;" id="port32201295-a833-45ea-8268-7c4bc0aa9887" ng-checked="port.checked" ng-disabled="port.disabled" ng-click="getSelectedPorts($event,port); 
submenu.network.minimizeMaximizePops($event)">

JS

    var cb  = element(by.css('#port32201295-a833-45ea-8268-7c4bc0aa9887'));
        cb.click() // failed(element is not visible | but element is visible have height & width) 
browser.actions().mouseMove(cb).click().perform();// nothing happens

i had also tried with hard-coded value and there is no syntax error, i am facing issue with only check boxes — Shailendra Sharma, Oct 19 '16 at 12:53
Calling .click() on a checkbox should work fine, I believe the issue here to be your selector not selecting an element. Have you tried going into the browser developer tools and executing the statement in there? — Tom Nijs, Oct 19 '16 at 13:00
@TomNijs i have updated the question and also run $('#port32201295-a833-45ea-8268-7c4bc0aa9887') in firebug which capture right checkbox — Shailendra Sharma, Oct 19 '16 at 13:14
Could it be that an animation is taking place ( even a very short one ) right before you are trying to click the checkbox? — Tom Nijs, Oct 19 '16 at 13:18
i have tried browser.sleep(50000) to put some wait before clicking the element , but no luck — Shailendra Sharma, Oct 19 '16 at 13:49
@TomNijs same is working when i change check box in to the button, any clue ? — Shailendra Sharma, Oct 20 '16 at 08:29
Is there perhaps an (invisible) element thats hovering over the checkbox? — Tom Nijs, Oct 20 '16 at 08:54
@TomNijs finally resolve it by remove all custom style from checkbox, we are used some sort of css to change checkbox appearance , click on this was working From UI but protractor was not able to trigger it . — Shailendra Sharma, Oct 20 '16 at 09:40
Glad to hear it's resolved, perhaps answer your own question to allow people with a similar to find the issue. — Tom Nijs, Oct 20 '16 at 09:46

score 0 · Answer 1 · answered Oct 19 '16 at 13:00

Alternatively you can use to click a check box by using element(locator).click()

function setCheckBoxTo(locator, value){
    var checkbox = element(locator);
    checkbox.isChecked().then(function(selected){
        if(selected !== value){
            checkbox.click();
        }
    }
}

Reference here author

score 0 · Accepted Answer · answered Nov 04 '16 at 05:27

Fixed this issue by removing custom styles form checkbox,in my case the real checkbox is override by checkbox look like div , because of this element is not visible for protractor , this happens only in case of check-boxes because i am also using select2.js for select boxes.

Calling "click()" on checkboxes fails in protractor

2 Answers2