41047

hasAttribute in DOM not working properly

Question:

I have this form in an tect.html file and I want to test if the button is disabled or not:

<pre class="snippet-code-html lang-html prettyprint-override"><button id="ref_button"....[disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">

I am using protractor, cucumber, and chai dom to test if this button is disabled when the form data are invalid, so I check its attribute disabled like this:

<pre class="snippet-code-html lang-html prettyprint-override"> JSDOM.fromFile("file.html").then(dom => { dom.window.document.getElementById("ref_button").has.attr('disabled').should.be.true; }); });

Now the test fails because it always finds the attribute disabled, when the button is disabled or not, when the datas are valid or not.

What am I doing wrong?

Answer1:

I think the attribute [disabled] does NOT exist on button element( that's why it's always true). It's the attribute disabled which you have to look for( without [ and ] markup. It's binding syntax.

So when thinking about it, this should work: (did not test...)

dom.window.document.getElementById("ref_button").should.not.have.attr("disabled");

But probably this will always output false since a button does have that attribute. To make this consistently work you should take the value of the disabled attribute and check wheter it's true.

dom.window.document.getElementById("ref_button").getAttribute("disabled").toBeTruethy().

I actually don't know if toBeTruethy() does exist in chai but my point here is, that you should check the value of an attribute and not just if an attribute exists in general.

One other thing to mention is this:

element(by.css("*[id='field_nombre']")).click(); element(by.css("*[id='field_nombre']")).sendKeys('').then(callback);

I guess click() is also an asynchronous function and in above example keys are sent before click() has finished it's execution. This would be correct I think:

element(by.css("*[id='field_nombre']")).click().then(function() { element(by.css("*[id='field_nombre']")).sendKeys('').then(callback); });

Answer2:

For angularJs, you should use directive ng-disabled in your html

from official <a href="https://docs.angularjs.org/api/ng/directive/ngDisabled" rel="nofollow">documentation</a>:

<blockquote>

A special directive is necessary because we cannot use interpolation inside the disabled attribute. See the interpolation guide for more info.

</blockquote>

Recommend

  • How do you stub fetch api request
  • How to turn off JSHint error?
  • React Redux async action testing
  • Java - Enforce TextField Format - UX - 00:00:00;00
  • C# ImageList won't display images
  • Cannot run protractor scripts using code generated by Appium for IOS it says that findelement is not
  • Android DownloadManager save to Download folder
  • Why does one of these statements compile in Scala but not the other?
  • How upload video/mp3 file on firebase android
  • Should I use composite primary keys in Grails?
  • How to add closing tag for canvas in three js rendered Canvas?
  • Get the pasted content on document on paste event
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • Symfony 2. CSRF token is invalid
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • Unable to decode certificate at client new X509Certificate2()
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • How to avoid particles glitching together in an elastic particle collision simulator?
  • Alert pop up with LWUIT
  • Recording logins for password protected directories
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Splitting given String into two variables - php
  • HTML download movie download link
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • Check if a string to interpolate provides expected placeholders
  • Change an a tag attribute in JavaScript based on screen width
  • Release, debug version and Authorization Google?
  • Is there a mandatory requirement to switch app.yaml?
  • AngularJs get employee from factory
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • using HTMLImports.whenReady not working in chrome
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • embed rChart in Markdown
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app