Cypress says disabled attribute always has value "disabled"

Question

I have an HTML element with a disabled attribute that is either true or `false, like:

<div class="row" disabled="false">

or

<div class="row" disabled="true">

I thought this would be straightforward to verify in Cypress by doing something like:

cy.get("div.row").should("have.attr", "disabled", "false")

However, when I tried that the test fails because Cypress reports that the disabled attribute of the element does not have the value "false" but instead has the value "disabled".

If I open the browser inspection tool I can verify that the attribute is shown as I've written above. Any idea what is going wrong?

Answer 1

See HTML attribute: disabled

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.

This means it is either present or not, it doesn't take a value.

Any value you do give it, either "true", "false", or "something else" cause the element to be disabled - simply because the attribute is there.

The assertion .should('have.attr', 'disabled', 'false') is not behaving as expected, the correct assertion for the disabled attribute is .should('be.disabled')