Is the input disabled when clicked on?

Question

Is the input disabled when clicked on?

To ensure the end-to-end functionality of my application, I have implemented a scenario where upon clicking a spinner button, both Username and Password input fields are disabled before being directed to a new page. My testing methodology involves verifying if these input fields are indeed disabled as intended.

element(by.model('username')).sendKeys('testuser');                   
element(by.model('password')).sendKeys('testpassword');                   

/* simulate clicking on the spinner button */
spinBtn = element(by.className('call-to-action'));                               
spinBtn.click(); 

/* confirm that the inputs are disabled */
var loginInput = element(by.id('login-username'));                               
expect(loginInput.isEnabled()).toBe(false);

javascript angularjs protractor angularjs-e2e

Answer 1

Answer №1

Here is a different approach:

When you want to check if something is enabled, do not use the previous example which verifies if an element is disabled.

Instead, you can confirm if something is enabled by using the following code:

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

This will accurately determine whether an element is enabled or disabled.

If this method does not work as expected, there may be other factors causing the issue.

Answer 2

Here is a different approach:

When you want to check if something is enabled, do not use the previous example which verifies if an element is disabled.

Instead, you can confirm if something is enabled by using the following code:

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

This will accurately determine whether an element is enabled or disabled.

If this method does not work as expected, there may be other factors causing the issue.

Answer 3

Answer №2

Shoutout to @TaylorRose's top-voted solution, it's really helpful!

// Checking if the button is enabled
expect($('#saveChangesBtn').isEnabled()).toBe(true);

Unfortunately, I encountered an error when trying this:

 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 a couple of ways to solve this problem, here are two suggestions:

1. Cast your expect to type 'any'

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

2. Include @types/jasminewd2 in your package json (and don't forget to run 'npm install') (thanks to aktraore@github)

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

By doing this, you can avoid TypeScript errors and resolve the issue. P.s. Version 2.0.6 is the latest at the time of writing this, but the specific version may vary for your scenario.

If anyone else is facing the same problem, consider these additional insights along with the highest-rated response.

Answer 4

Shoutout to @TaylorRose's top-voted solution, it's really helpful!

// Checking if the button is enabled
expect($('#saveChangesBtn').isEnabled()).toBe(true);

Unfortunately, I encountered an error when trying this:

 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 a couple of ways to solve this problem, here are two suggestions:

1. Cast your expect to type 'any'

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

2. Include @types/jasminewd2 in your package json (and don't forget to run 'npm install') (thanks to aktraore@github)

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

By doing this, you can avoid TypeScript errors and resolve the issue. P.s. Version 2.0.6 is the latest at the time of writing this, but the specific version may vary for your scenario.

If anyone else is facing the same problem, consider these additional insights along with the highest-rated response.

Answer 5

Answer №3

After finding that the method "getAttribute('disabled').toEqual('true') " was not effective, I opted to utilize className to successfully conduct my test, given that the classNames altered upon being disabled.

Answer 6

After finding that the method "getAttribute('disabled').toEqual('true') " was not effective, I opted to utilize className to successfully conduct my test, given that the classNames altered upon being disabled.

Is the input disabled when clicked on?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

Turning a JavaScript function into jQuery

Retrieve the user_id without triggering any route

What is the best way to retrieve the reference value from a dropdown box and pass it to another component?

How to retrieve the value from an editable td within a table using Jquery

Unable to convert JavaScript object to C# through deserialization

What sets apart a space after the ampersand from no space in Material UI?

Can you explain the contrast between open and closed shadow DOM encapsulation modes?

Obtaining Compiled HTML Output Using AngularJS

How to Use ngFor to Create a Link for the Last Item in an Array in Angular 7

Searching to loop through JSON within a Sequelize / Postgres database query in order to identify a corresponding value

Dealing with Javascript exceptions and sending email notifications in Django

ES6 Update: Manipulating Nested Arrays with JavaScript

Is there a way to retrieve the controller instance linked to a directive within the link function?

Sorting arrays in JavaScript can become tricky when dealing with arrays that contain values from two different arrays

Tips for receiving a reply from S3 getObject in Node.js?

Trigger is not activated by dynamically created element

The delete button in the "Chip" component of React Material-UI is not functioning as expected

Is it possible to click the back button on your browser and return to an ajax page while keeping it in the same appearance?

JavaScript autostop timer feature