1

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

  • 1
    Also add your selectors. If the first one works and the others don't, we cant help if we can't see what is different about them. – kirbycope Apr 12 '18 at 16:28
  • the difference between the selectors is only in the index it changes from div[1] to div[6] – RRR Apr 13 '18 at 8:25
  • set the display property from none to block using java script executor, and also add the error if you're getting - helps in debugging. – demouser123 Apr 13 '18 at 15:20
  • @demouser123 I have asked the developers to look into that – RRR Apr 13 '18 at 15:27
  • You can explicitly use js to set the value. – demouser123 Apr 13 '18 at 15:27
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);
  }); }
  • I tried that too with isVisible and isClickable,but not working.Is span style="display:none" this can be the reason?It is there for all the checkboxes including first one – RRR Apr 13 '18 at 8:38
  • Can you manually interact with these checkboxes in the application? Try with IsPresent instead of isVisible as might be elements exist in the DOM but not visible. – Vishal Aggarwal Apr 13 '18 at 8:49
  • Yeah..its working manually.I tried is it present in DOM too – RRR Apr 13 '18 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.