Cypress Workarounds: Force Click

Whenever Cypress cannot interact with an element it fails. Which makes sense.

An item is not actionable when it is hidden, disabled, detached, covered – just to mention some.

But sometimes we need to click on not actionable elements.

Cypress does let us to force a click regardless of its actionable state. Forcing a click overrides the actionable checks and will automatically fire the event.

cy.get('button').click({ force: true })

When I checked my code I saw some this usage. And I didn’t like it. So I was thinking, what if I created a custom command for this.

So I ended up creating a custom command for forced click events.

Cypress.Commands.add('forceClick', { prevSubject: 'element' }, (subject, options) => {
  cy.wrap(subject).click({ force: true })
});

Then in the page object functions I used this:

cy.get('button').forceClick();

With this in my code I can sleep better.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s