Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Ensure element is not disabled" actionability not respected for <a> element #5517

Closed
robbiewareham opened this issue Mar 1, 2023 · 2 comments · Fixed by #5520
Closed

"Ensure element is not disabled" actionability not respected for <a> element #5517

robbiewareham opened this issue Mar 1, 2023 · 2 comments · Fixed by #5520
Assignees
Labels
CT triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team.

Comments

@robbiewareham
Copy link

robbiewareham commented Mar 1, 2023

Current behavior

Performing a click on an <a> that has the disabled attribute does not wait for the disabled attribute to be removed, rather it immediately performs the click successfully.

Desired behavior

The Cypress documentation says :

Cypress checks whether an element's disabled property is true.

(https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Disability)

It makes no reference to what the element type is, but rather to the event; in this case click() which is explicitly covered.

Therefore, this would initially appear to be a clear bug in Cypress.

However.......

W3C says that disabled is only supported for a subset of elements (https://www.w3schools.com/tags/att_disabled.asp)

<button> 
<fieldset>
<input> 
<optgroup>
<option> 
<select>
<textarea>

...therefore it could be perfectly valid to say that Cypress is behaving correctly as <a> should not be able to be disabled.

Why do I want <a> to respect disabled?

The application I am running Cypress against uses <a> with styling to represent buttons, and itself then uses disabled attribute to prevent the user from clicking button through bespoke mechanisms.

It would be great for me personally for Cypress to work as per documentation and check for disabled for ALL elements.

However, I completely understand that this is non-compliant HTML and therefore should be not expected to work.

If the decision is that this is expected behavior, then I would suggest that documentation is updated to make it clear that the disabled attribute is only checked where it is W3C supported

Test code to reproduce

describe("Clicking on a disabled link", () => {
  beforeEach(() => {
    cy.intercept("home", {
      statusCode: 200,
      fixture: "disabledLinkExample.html",
    });
  });

  it("this test should fail", () => {
    cy.visit("home");
    cy.get("#disabledLink").click();
  });
});

...where disabledLinkExample.html is:

<html>
  <body>
    <a id="disabledLink" href="#myTag" disabled>Disabled Link</a>
  </body>
</html>

Cypress Version

12.3.0

Node version

16.3.1

Operating System

macOSX

Debug Logs

No response

Other

No response

@marktnoonan
Copy link
Contributor

Thanks for reporting this, we will update the documentation - since the disabled attribute on a link element does not prevent users from clicking the element, it would incorrect for Cypress to behave differently.

@marktnoonan marktnoonan self-assigned this Apr 5, 2023
@robbiewareham
Copy link
Author

Thanks @marktnoonan

This decision makes perfect sense

@nagash77 nagash77 added CT triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. labels Apr 19, 2023
@jennifer-shehane jennifer-shehane transferred this issue from cypress-io/cypress Oct 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CT triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants