Cy ...failed because this element prevents user mouse interaction.

I kindly need help on how I can go about this error

CypressError
Timed out retrying after 8050ms: cy.click() failed because this element:

          <span class="MuiButton-label">Add con...</span>

          has CSS pointer-events: none, inherited from this element:

<a class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary Mui-disabled Mui-disabled" tabindex="-1" role="button" aria-disabled="true" href="/actions">...</a>

          pointer-events: none prevents user mouse interaction.

          Fix this problem, or use {force: true} to disable error checking.Learn more

Without overriding the built-in checks using {force: true} option for I may force the tests to pass when the element is actually not interactable in the application.

@kdaud, @ibacher, @jayasanka, @sharif in relation to this PR

@jwnasambu So, some more context is necessary to work out this issue. But basically what happens is this: when you first arrive on the “Add Bulk Concepts” page, the button to add concepts is disabled, which is becase we explicitly set it to be disabled if the input is blank. The disabled flag will be set to false (and thus the button will be clickable) when the TextField onChange() event occurs.

The reason that this button is disabled is because no text ever gets entered into the field. So, e.g. in this step definition, the only thing that it does is call cy.getConcept("#conceptId") (I’m not sure what this is trying to do) and then call cy.get("textarea"), i.e., we get a reference to the textarea, but don’t do anything with it. That step definition needs to be re-written to something more like:

When(
  /the user enters concept Id "(1000|1001|1002)"/, (conceptId) =>
    cy.get("textarea").type(conceptId)
); 

This should work because the regular expression we use in the When() call has a single capture group which is one of “1000”, “1001”, or “1002”. That value then gets assigned as the first argument to our function (which is why we have the (conceptId) => part.

In the body of the function, we first get a reference to the textarea on the screen, and then type that conceptId in. At that point, the onChange event should’ve fired and the button should now be accessible.

2 Likes

Thanks so much for a clear explanation.