Guidance for clicks out of view

[alexfinnarn]

When you try to cy.get('#thing').click() and the thing is out of the viewport, the test will fail and say something like "Fix this problem, or use {force: true} to disable error checking".

In the past, I've gone ahead and followed that advice, that is until I saw this Stack Overflow answer: https://stackoverflow.com/questions/61321918/make-forcetrue-in-click-function-the-default-behavior

Now, I think I should be scrolling into view before trying to click and only force the click if scrolling into view doesn't work.

// Use when Cypress says the element isn't clickable because it is out of view.
cy.get('#thing').scrollIntoView().click();

// Only use if last resort.
cy.get('#thing').click({force: true});

But is there more to the story?

I know some elements can be in the viewport but hidden by a modal or something, and in that case, you would have to force the click...but you should really close the modal first...so I'm not sure where forcing a click is a good idea but rather it is a shortcut.

Maybe https://docs.cypress.io/api/commands/click#Force-a-click-with-relative-coordinates could be a good reason...but man, the click command has way more features and caveats than I thought.

[dmundra]

I had this come up recently on cypress tests I was writing where table filters that I wanted to use were in an accordion that can be shown/hidden. The button for the accordion would also be shown/hidden depending on the state of the accordion. It was brittle enough for me to rewrite the test to use a different view that didn't have those filters (dealing with Ilias LMS in this case) after I tried {force: true}. It also made the test longer and harder to read with the "show filter" step followed by the "hide filter" step later on.

In my opinion, ideally you can find a way to avoid {force: true} as a real user wouldn't have that option. So in the case of the hidden from view, find a way to (consistently bring it into view).

For my case above, I wanted to see if there is a way to do conditional logic, "if show filter is available then click it, otherwise continue on and use the filter" but I didn't spend any time on that.