Make {force:true} in click() function the default behavior

Question

I am using Cypress to test a web application. I am keep getting this visibility error (This element ''is not visible because its parent...) when trying to click links/buttons using the click() function.

Cypress' suggestion to 'Fix this problem, or use {force: true} to disable error checking' does help.

Now, I've been googling about how to make {force:true} the default behavior for the click() function so I do not have to write it in every use of the click() function but couldn't find anything so far - click({force:true}).

It that even possible? Any thoughts out there?

BR

Answer 1

You could write a custom command for click called forceClick.

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

Then you can use:

cy.forceClick()

Rather than

cy.click()

Answer 2

You really should scrollIntoView() before you .click() in this case. I had a nasty UI bug where a button's request was being made 2x only in Cypress because we were force clicking a button not in view.

I'd suggest:

cy.get('button').scrollIntoView().click();