Need help how to work with watir testing angularjs app

[Mahesh Mesta]

Hi,

I am very new to watir. I have been trying to test the edit profile of an application.I need to set and clear a checkbox, upload an image file and enter some text in the angular rich text editor for testing.However I am not been able to do either three of them.

(1).For check box the angularjs elements go as follows

<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><div ng-transclude="" class="md-label"><span class="ng-scope">Remove</span></div></md-checkbox>

I need to check and uncheck the checkbox.

(2) For uploading the image file, the elements are as follows

<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">
 
 I need to upload a profile pic i.e an image file

Kindly help me to get the solution for them using watir webdriver. I would really appreciate it.

Regards,
Mahesh.

[Super Kevy]

You may wish to review: https://jkotests.wordpress.com/2012/08/28/locate-element-via-custom-attribute-css-and-xpath/

else something as simple as 

browser.text_field(:class,"ng-pristine ng-valid ng-touched").send_keys('thefilename')

The checkbox code eludes me, This looks like the remove feature where something like. 

browser.span(:text,"Remove").click

[Justin Ko]

For the checkbox (copied from the answer on Stack Overflow):

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

- Justin Ko