Setting/clearing AngularJS md-checkbox with Watir

Question

I'm trying to perform automated testing using Watir gem. I need to test whether the checkbox works by setting and clearing it.

The HTML for the checkbox is:

<md-checkbox aria-label="Remove" aria-invalid="false" aria-checked="false" tabindex="0" class="ng-pristine ng-valid md-default-theme ng-touched" role="checkbox" ng-model="user.remove_photo" style="margin-top: 0px;">
  <div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox="">
    <div class="md-icon"></div>
    <div class="md-ripple-container"></div>
  </div>
  <div ng-transclude="" class="md-label">
    <span class="ng-scope">Remove</span>
  </div>
</md-checkbox>

My test script:

require 'watir'
require 'watir-webdriver/wait'  

browser =  Watir::Browser.new :firefox 
browser.goto 'https://54.69.254.137/webui#/landing'
browser.driver.manage.window.maximize
browser.button(:class =>'sign-in md-button md-default-theme').click
browser.text_field(:id =>'input_001').set('[email protected]')
browser.text_field(:id =>'input_002').set('password')
browser.button(:class =>'md-primary md-raised md-button md-default-theme').click                  
browser.button(:class =>'md-icon-button md-primary main-menu-toggle md-button md-default-theme').when_present.click
browser.link(:text =>'Edit Profile').when_present.click
browser.checkbox(:class => 'ng-pristine ng-valid md-default-theme-ng-touched').set
browser.button(:class => 'md-primary md-raised md-button md-default-theme').click

Gives following error:

unable to locate element using checkbox(:class => 'ng-pristine ng-valid md-default-theme- ng-touched').

Please share the relevant HTML. We need enough information within the question to reproduce the problem (see how to ask). — Justin Ko
For Upload file <input aria-invalid="false" tabindex="0" class="ng-pristine ng-valid ng-touched" ng-model="user.photo" onchange="angular.element(this).scope().file_selected(event)" type="file"> — Mahesh Mesta
For check box: <md-checkbox aria-label="Remove" aria-invalid="false" aria-checked="false" tabindex="0" class="ng-pristine ng-valid md-default-theme ng-touched" role="checkbox" ng-model="user.remove_photo" style="margin-top: 0px;"><div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox=""><div class="md-icon"></div><div class="md-ripple-container"></div></div><div ng-transclude="" class="md-label"><span class="ng-scope">Remove</span></div></md-checkbox> — Mahesh Mesta
You should ask the second question about upload the file in a separate question (ie ask one question per question). When creating the question, please make sure to provide the Watir code and exceptions you are getting. — Justin Ko

Justin Ko Justin Ko · Accepted Answer · 2015-07-15T13:21:04

The problem with the checkbox is that it is not an HTML checkbox - ie <input type="checkbox">. Instead it is a md-checkbox, which I believe is from the Angular Material library. As a result, Watir's checkbox method will not see it.

You will need to treat the md-checkbox as a generic element and use the click method to set/clear it:

browser.element(class: 'ng-pristine ng-valid md-default-theme-ng-touched').click

The class attribute does not look unique. You might want to use one of the other attributes instead. For example:

browser.element(aria_label: 'Remove').click

Setting/clearing AngularJS md-checkbox with Watir

1 Answers