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);
javascriptangularjsprotractorangularjs-e2e

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript subtraction operation may result in Undefined

I am a beginner in the world of TypeScript and I'm currently struggling with running this code snippet: class TestClass { public t: number = 10; constructor() { this.t = this.t - 1; console.log(this.t); } } var obj = new TestClass(); ...

javascripttypescript

Seamless social login integration for registering with Stormpath

Transitioning from C# and PHP to Node.js has presented some challenges, especially when working with the Stormpath API. I am currently trying to integrate social login on the registration page, but the pre-built option only allows it on the Login page. Al ...

javascriptnode.jsexpressstormpathexpress-stormpath

What is the best way to extract the event time when a user clicks on an event in fullcalendar?

Is there a way to extract only the time from an eventclick event in fullcalendar? Currently, I am receiving details about the event including date and time. How can I specifically retrieve just the time (e.g. 6:00:00 am)? You can find the code snippet tha ...

javascriptjqueryfullcalendarmomentjs

"Assigning an array as a value to an object key when detecting duplicates in a

Let's assume the table I'm iterating through looks like this: https://i.stack.imgur.com/HAPrJ.png I want to convert each unique value in the second column into an object, where one of the keys will hold all values from corresponding rows. Here& ...

javascriptjqueryoop

Creating HTML elements using JavaScript compared to importing an HTML fileIn JavaScript,

I am currently in the process of building a website that is entirely driven by JavaScript. Aside from the index page, I do not use any HTML pages at all. Instead, I fetch JSON data for every query and then dynamically generate HTML within the JavaScript to ...

javascripthtmljsondynamic

Maintain the previous state in AngularJS using ui-router

My goal is to preserve the current state of the view, not just the URL and parameters. I am looking to save the entire view along with its scopes. Specifically, I am working on creating a search system similar to Facebook's, but with a unique twist. I ...

javascriptangularjsangular-ui-router

Issues with clicking on the ion-tab icon in AngularJS are hindering the functionality

I'm currently facing a challenge with an ion-tab icon in my AngularJS project. I've been attempting to add a click action using the code below, but unfortunately, nothing is displaying as expected. HTML <ion-tab title="Share" icon="icon ion- ...

javascripthtmlangularjs

Laravel does not have the capability to provide a genuine json response

I am facing an issue with my Laravel controller. The code is straightforward: class MyController extends Controller { public function list() { return response()->json(['a' => 'hello']); } } When I access the ...

javascriptjsonlaravellaravel-5fetch-api

Working with the Enter Key in Vue.js

I am faced with a challenge involving a text field and a button setup. By default, the button is set to submit a form when the Enter key is pressed on the keyboard. My goal is to capture each key press while someone is typing in the text field, particularl ...

javascriptvue.js

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...

javascriptjqueryhtmlselect

What is the most efficient way to extract dynamically generated JavaScript content from a webpage?

Currently, my method involves using selenium alongside PhantomJS to scrape dynamic content generated by JavaScript on a website. Although it provides me with the desired results, the process is quite slow as I have to wait for the entire page to load befor ...

javascriptpythonseleniumphantomjs

Is there a way to implement jwt.verify() from jsonwebtoken in a React application?

Every time I attempt to use the jwt.verify() or jwt.decode() function in my React project, it keeps throwing a multitude of errors. The errors that I encounter are: ERROR in ./node_modules/jwa/index.js 5:13-30 Module not found: Error: Can't resolve ...

javascriptnode.jsnpmwebpackjwt

The jQuery autocomplete feature with typeahead suggestions fails to appear following a successful AJAX request

I am currently using typeahead.js to incorporate tags into my multiple input setup. The tagging function works as expected, however, I am facing an issue where the autocomplete suggestions are not appearing. Is there a solution to fix this problem? Despit ...

javascriptphpjqueryajaxtypeahead.js

Error encountered when attempting to create an index in ElasticSearch due to

I am encountering an issue with the elasticsearch npm module while attempting to create an Index, resulting in a TypeError with the following message: Unable to build a path with those params. Supply at least index The code snippet I am using is as follo ...

javascriptnode.jselasticsearch

AngularJS Dropdown Does Not Appear to be Linked to ng-Model

Having trouble with my Angular select binding. Despite having the correct value, the select isn't updating. Why might this be happening? <div ng-controller="MyController" ng-app> <select class="form-control" ng-model="colorId"ng-options= ...

angularjsng-options

What is the best way to download a file with a specific name using Angular and TypeScript?

Greetings! Below is a snippet of code from my Angular component: this.messageHistoryService.getMessageHistoriesCSV1(msgHistoryRequest).subscribe( (data) => { console.log(data.messageHistoryBytes); let file = new Blob( [data.messageHistoryBytes ...

javascriptangulartypescript

Translating a few lines of JavaScript into C#

I'm looking to convert some code from JavaScript to C#, but I'm having trouble grasping a certain section... function getHisto(pixels) { var histosize = 1 << (3 * sigbits), histo = new Array(histosize), inde ...

javascriptc#

Getting a page element by its id with QWebEngineView is a simple task that can be

Is there a way to access the page ElementById in order to input a value? import sys from PyQt5 import QtWebEngineWidgets from PyQt5.QtCore import * from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import * from PyQt5.QtWidgets import QAction from PyQt ...

javascriptpythonpyqtpyqt5qtwebengine

Navigational controls for a JavaScript slider - Backward and Forward options

I'm in the final stages of completing my slider project, but I'm stuck on how to incorporate the next() and prev() functionalities. Can anyone provide guidance on implementing these functions? http://jsfiddle.net/M4t4L/11/ $(function () { ...

javascriptjquery

What are some strategies for preventing the $window.alert function from being triggered within an AngularJS controller's scope?

How can I prevent the alert from appearing on my dashboard? Do you have any suggestions? Thank you! I attempted to override the alert empty function in my controller, but I am still encountering the window alert when I navigate to my page. $window.alert ...

javascripthtmlangularjs