Not able to check the checkboxes on a javascript page

Question

Here is the code I used to select the checkboxes

selectAllEmployeeInputRequired()
 { this.scrollToAndClick(this.employeeInputButton);
return browser.wait(this.isVisible(this.employeeInputModalForm))
  .then(() => {
    this.scrollToAndClick(this.employeeDeptCheckBox);
    this.scrollToAndClick(this.employeeAuthCodeCheckBox);
    this.scrollToAndClick(this.employeeDobCheckBox);
    this.scrollToAndClick(this.employeeCountyCheckBox);
    this.scrollToAndClick(this.employeeAddressCheckBox);
    this.scrollToAndClick(this.employeeIdCheckBox);
    this.scrollToAndClick(this.employeeInputModalFormSubmitButton);
  }); }

Below given is the HTML code for a single check box

<div class="ng-star-inserted">
    <efx-checkbox-field>
        <div class="form-group efx-checkbox-field">
            <div>
                <mat-checkbox class="example-margin mat-checkbox mat-accent ng-untouched ng-pristine ng-valid"
                              id="650960">
                    <label class="mat-checkbox-layout" for="650960-input">
                        <div class="mat-checkbox-inner-container">
                            <input class="mat-checkbox-input cdk-visually-hidden" type="checkbox" id="650960-input"
                                   tabindex="0" aria-label="" aria-checked="false">
                            <div class="mat-checkbox-ripple mat-ripple" matripple=""></div>
                            <div class="mat-checkbox-frame"></div>
                            <div class="mat-checkbox-background">
                                <svg xml:space="preserve" class="mat-checkbox-checkmark" focusable="false" version="1.1" viewBox="0 0 24 24"><path class="mat-checkbox-checkmark-path" d="M4.1,12.7 9,17.6 20.3,6.3" fill="none" stroke="white"></path></svg>
                                <div class="mat-checkbox-mixedmark"></div>
                            </div>
                        </div>
                        <span class="mat-checkbox-label"><span style="display:none">&nbsp;</span>County in which the
                            employee works
                        </span>
                    </label>
                </mat-checkbox>
            </div>
        </div>
    </efx-checkbox-field>
</div>

Also,

this.employeeDeptCheckBox = element(by.xpath('//*[@id="employeeInputModal"]/div/div/div[2]/form/div[1]/efx-checkbox-field/div/div'));

xpath is the selector used to select the field.But I am not able to click on the checkboxes except the first one(employeeDeptCheckBox) and the last submit button.I am using protractor framework and cucumber here.Please help me to solve this

Answer 1

Most likely, you are trying to click something, before its loaded.Wait for the last checkbox to become visible.Something like below:

selectAllEmployeeInputRequired()
 { this.scrollToAndClick(this.employeeInputButton);
return browser.wait(this.isVisible(this.employeeIdCheckBox))//whichever is last
  .then(() => {
    this.scrollToAndClick(this.employeeDeptCheckBox);
    this.scrollToAndClick(this.employeeAuthCodeCheckBox);
    this.scrollToAndClick(this.employeeDobCheckBox);
    this.scrollToAndClick(this.employeeCountyCheckBox);
    this.scrollToAndClick(this.employeeAddressCheckBox);
    this.scrollToAndClick(this.employeeIdCheckBox);
    this.scrollToAndClick(this.employeeInputModalFormSubmitButton);
  }); }