using protractor to get the disabled attribute on button not working

Question

I'm trying to get the disabled attr on a button it should be "disabled" but I don't seem to be getting the value. New to angular and protractor!

When I inspect the page this is what HTML I get for the button showing disabled is disabled, like it is on the page:

 <button type="submit" class="button primary inverse" ng-disabled="!comment.$dirty && comment.$valid" disabled="disabled">Save</button>

The protractor test below returns 'Expected null to equal disabled'

    var btnSave = element(by.css('.primary'));
    expect(btnSave.isPresent()).toBeTruthy();

    var attr = element(by.css('.primary')).getAttribute('disabled');

    expect(attr).toEqual("disabled");

When I try I get expected '' to equal disabled.

expect(attr).toEqual("disabled");

Any ideas where I'm going wrong?

Thanks

Answer 1

getAttribute() function in protractor returns value in the form of promise. So either you have wait until its returned and then perform validation or you can pass in the function to the expectation which in turn resolves the promise. disabled html attribute is a boolean attribute and hence the value that it returns is either true or false. Here's how -

element(by.css('.primary')).getAttribute('disabled').then(function(attr){
    expect(attr).toBe(true);
});

OR

expect(element(by.css('.primary')).getAttribute('disabled')).toBe(true);

Hope it helps.