Blog

Here, I am sharing one issue I resolved about ‘How to assert element is not clickable?’. I am new to Cypress and have been working on with the help available online and Cypress documentation.

I came across an issue where my test case was:
‘Verify that the element is non-accessible for the user.’
Seems like a straight forward test case until the following command did not work:

cy.get('<element>').should('be.disabled');

I then tried-

cy.get('<element>').should('be.enabled');

Which passed to my surprise!

Next, I tried the click event which failed with bellow error:

CypressError

Timed out retrying after 4050ms: cy.click() failed because this element: 
        <button tabindex="0" role="button" type="button" class="styled__ButtonStyled-sc-1yehmu-0 biRuRO styled__SegmentedControlOptionStyled-sc-f4o3io-0 icuQsD" style="height: 22px;">Primary</button> 
           has CSS pointer-events: none, inherited from this element: 
          <div class="styled__BoxStyled-sc-1vfsiyx-0 kbCUFo" style="opacity: 0.5; pointer-events: none;">...</div> 
           pointer-events: none prevents user mouse interaction. 
  Fix this problem, or use {force: true} to disable error checking.

Cypress Parent() feature allowed me to execute my test case successfully as expected. Below is the one line code:

cy.get('<element>').parents('<desired parent/parent's parent element>').should('have.css', 'pointer-events', 'none');

Hope this helps. Happy coding!