(Protractor) Checking whether an input is disabled on click?

Question

I have two input fields, Username and Password and a spinner button. When i click on this spinner button these two input fields get disabled and I am redirected to another page. I am writing an end-to-end testing to check whether these input fields are disabled.

element(by.model('username')).sendKeys('rabi');                   
element(by.model('password')).sendKeys('rabi');                   

/* click on spin button */
spinBtn = element(by.className('call-to-action'));                               
spinBtn.click(); 

/* check if input is disabled */
var loginInput = element(by.id('login-username'));                               
expect(loginInput.isEnabled()).toBe(false);

Strophic

Answer 1

The previous example of

expect(loginInput.getAttribute('disabled')).toEqual('disabled');

Will not work for checking if something is enabled.

You should use

expect(loginInput.isEnabled()).toBe([true|false]);

to accurately verify if something is enabled/disabled.

If that isn't working for you, there's probably something else going on.

Zygodactyl

Taylor is right, isEnabled() is the correct way to do it. It should be lower case I though, so the correct line would be expect(loginInput.isEnabled()).toBe([true|false]). See the docs for more information. – Arnaldo

isEnabled() works great and should be considered the correct answer. I found that expect(loginInput.getAttribute('disabled')).toEqual('disabled'); didn't work unless I had toEqual('true'). isEnabled() is a much cleaner solution. – Hoehne

Answer 2

I want to add that @TaylorRose's answer (the most voted answer) is very good and thank him for that.

// passes when the button does not have 'disabled' attribute
expect($('#saveChangesBtn').isEnabled()).toBe(true);

However when I tried to run this I got an error:

 Error: TSError: ⨯ Unable to compile TypeScript e2e/specs/element.e2e-spec.ts: 
  Argument of type 'false' is not assignable to parameter of type 'Expected<Promise<boolean>>'.

---

There are multiple solutions to this issue and here are two of them:

1.Cast your expect to type 'any'

expect<any>($('#saveChangesBtn').isEnabled()).toBe(true);

2.Add @types/jasminewd2 to your package json (and run 'npm install' of course) (thanks to aktraore@github)

 "devDependencies": {
    ...,
    "@types/jasminewd2": "2.0.6",
    ...
   }

And then no more errors from typescript and it solves this problem. P.s. Version 2.0.6 is the latest as of writing this post and the magic version could be different for your case.

So this is addition to the most voted answer if anybody here is having this issue.

Cyclamen

Answer 3

When using "getAttribute('disabled').toEqual('true') " did not work I used className instead, to complete my test, as the classNames changed when disabled.

Gey