Search code examples
javascripthtmlcypressui-automationchai

Cypress function should('be.disabled') is not recognizing toggle element as disabled, even though it clearly is

In my DOM I have an array of toggles without unique IDs. I am using cy.get(aur-toggle), which I can see is returning the correct array of elements. I can also see in the cypress UI (and the console output of the step) that it is selecting the correct element after evaluating .eq(index). The yielded field shows the correct element tag:

<aur-toggle _ngcontent-rcs-c562="" _nghost-rcs-c138="" aria-disabled="true" aria-checked="false" id="aur-toggle--070085442" role="switch" class="disabled label-top">

When it is checking if the element is disabled, the following error is thrown Timed out retrying after 10000ms: expected '<aur-toggle#aur-toggle--070085442.disabled.label-top>' to be 'disabled'. You can see even in the element selection, it has the disabled attribute.

I have also tried ('have.attr', 'disabled') and it yielded the same results.

Any ideas, wonderful minds of stack overflow?

Solution

  • You should be able to get it with

    ('have.class', 'disabled')

    The element does not appear to use the disabled attribute directly, but rather modifies it's behavior based on the class .disabled.